如何解决Flutter Widget的构建和结构
似乎有很多方法可以在Flutter中构建Widget。了解正确的方法有点不知所措。谁能解释一下在构建函数内部/外部定义变量之间的区别,如下:
内部课程
class Login extends StatelessWidget {
TextFormField username() {
return TextFormField();
}
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
内部构建功能
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
TextFormField username() {
return TextFormField();
}
return Scaffold();
}
按照以下方式定义变量之间也没有任何区别:
class Login extends StatelessWidget {
final username = TextFormField();
TextFormField username() {
return TextFormField();
}
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
非常感谢您的帮助。
乔纳森。
解决方法
在编程世界中,有几种方法可以执行任何操作。使用Flutter / Dart不会有什么不同。 但是,还有更多的“正统”做事方式,无疑可以使您摆脱结构性问题。
1-实例声明。 当您拥有不是窗口小部件的类时,通常会使用这些类的常见实例。
String name = "Jonny";
TextEditingController controller = TextEditingController();
声明小部件时,有3种方法,但建议仅使用1种方法。
第一个方法是将小部件存储在变量中(就像我们上面所做的一样)。
final text = Text ('Pablo');
Build widget (BuildContext context) {
return Scaffold (body: text);
第二个也是最不推荐的方法是创建一个为您提供该小部件实例的方法
Widget text () {
return Text ('Pablo');
}
Build widget (BuildContext context) {
return Scaffold (body: text ());
不建议使用第二种方法,因为每次调用该方法时,您都会制造一个新实例。如果此小部件的渲染效果很重,则说明您将资源浪费在垃圾桶中。
第三个(强烈推荐,我会告诉你,要坚持下去,别忘了它)是在树中嵌套小部件:
Build widget (BuildContext context) {
return Scaffold (body: Text ('Pablo'));
这确保了Text()的相同实例保留在树上,因此,如果它是一个更大的小部件,这将是最节省资源的方法。
如果我的树变得巨大怎么办?如何避免涟漪效应? 简单地,创建新的StatelessWidgets来打破树的级联效果。
Build widget (BuildContext context) {
return Scaffold (body: MyText());
class MyText extends StatelessWidget {
Build widget (BuildContext context) {
return Container (child:
Center (child: Text ('Pablo')),);
}
}
注意:这样做仅出于示例目的,您必须对可重用或可组件化的小部件进行组件化,以避免产生影响:
aa
aaa
aaaa
aaaaa
aaaaaa
aaaaaaa
aaaaaaa
但是,如果您有几行代码,则不必担心太多。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。