Flutter Widget 构建和结构答案

【问题标题】：Flutter Widget building & structureFlutter Widget 构建和结构
【发布时间】：2020-08-12 19:55:30
【问题描述】：

似乎有很多方法可以在 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】：

在编程世界中有几种方法可以做任何事情。使用 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

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

【讨论】：