如何最佳地组织Flutter小部件？

Question

我正在编写一个Flutter应用程序，想知道如何使我的代码更易读。

目前，我知道这两种方法：

1. 创建一个final变量并将自定义小部件存储在其中。
2. 创建一个新的小部件作为模板。

那么还有其他推荐的方法吗？

- Raouf Rahiche

Answer 1

关于：

1. 创建一个最终变量，并将自定义控件存储在其中

使用类变量来保存您的小部件，例如：

final Widget foo = new Foo();

可能是不必要的，或者可能指向其他问题。我认为最好创建一个返回小部件的函数，例如：

Widget _buildFoo() {
  return new Foo();
}

然后，您可以在build()方法中使用它，例如：（我添加了MaterialApp Scaffold以提供更多上下文）：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("My App"),
      ),
      body: _buildFoo(),
    );
  }

请看一下其他网站上的示例应用程序，例如Flutter Examples，以获取有关构造小部件的想法。

至于：

创建一个新的小部件作为模板

我将其解释为创建另一个文件来保存您的小部件类，例如foo.dart。这可能不是您要问的，但是随着应用程序的增长，为每个小部件创建新的dart文件可能会成为一个好主意。对于简单的应用程序，特别是您看到的大多数示例应用程序，将类保留在同一个dart文件中（例如main.dart）就足够了。再次强调，我可能没有回答您的问题。

回到：

使我的代码更易读的最佳方法

因此，总的来说，使用返回小部件树的不同部分的私有函数（即只返回小部件及其可能包含的任何子小部件的函数）通常比将小部件存储为类实例变量更好。如果您需要稍后引用或与小部件交互，则可以使用类变量。但是，这可能是一种不良做法，并且可能指向处理状态更改和小部件树结构的更好方法（例如，Flutter的Stateful和Inherited小部件非常适合处理状态更改，而无需对对象引用进行命令式调用）。

- Ashton Thomas

---

在什么情况下会优先选择 body: _buildFoo() 而不是简单地使用 body: new Foo()？（或者在 Dart 2 中使用 body: Foo()）我猜想如果你需要在实际返回 new Foo() 之前进行额外的工作，那么就会选择前者。 - undefined

@Herohtar，这是一个很好的问题。在这个简单的例子中，这并不重要，而且实际上可能会造成不必要的误导。然而，如果_buildFoo()继续构建一个非平凡的子树，那么将整体构建分解为更小的函数可能更易于维护。 - undefined