flutter - Flutter Widget的构建和结构

Question

似乎有很多方法可以在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();
 }

}

非常感谢你的帮助。
乔纳森

Answer 1

在编程世界中，有几种方法可以执行任何操作。使用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

但是，如果您有几行代码，则不必担心太多。