创建窗口小部件的函数和类有什么区别？

Question

我已经意识到，可以使用普通函数创建小部件，而不是将StatelessWidget子类化。一个例子是这样的：Widget function({ String title, VoidCallback callback }) {  return GestureDetector(    onTap: callback,    child: // some widget  );}这很有趣，因为它需要远远比一个全面的类更少的代码。例：class SomeWidget extends StatelessWidget {  final VoidCallback callback;  final String title;  const SomeWidget({Key key, this.callback, this.title}) : super(key: key);  @override  Widget build(BuildContext context) {      return GestureDetector(        onTap: callback,        child: // some widget      );  }}所以我一直在想：创建小部件的函数和类之间在语法上是否有区别？使用函数是否是一种好习惯？

Answer 1

永远不要在类上使用函数来制作可重用的widget-tree。始终将它们提取到StatelessWidget中。

使用函数而不是使用类之间存在巨大差异，即：框架不知道函数，但可以看到类。

考虑以下“窗口小部件”功能：

Widget functionWidget({ Widget child}) {

  return Container(child: child);

}

用这种方式：

functionWidget(

  child: functionWidget(),

);

它相当于类：

class ClassWidget extends StatelessWidget {

  final Widget child;

  const ClassWidget({Key key, this.child}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Container(

      child: child,

    );

  }

}

这样使用：

new ClassWidget(

  child: new ClassWidget(),

);

在纸上，两者似乎做的完全一样：创建2 Container，一个嵌套在另一个中。但是实际情况略有不同。

对于函数，生成的窗口小部件树如下所示：

Container

  Container

在使用类时，小部件树为：

ClassWidget

  Container

    ClassWidget

      Container

这非常重要，因为它从根本上改变了更新小部件时框架的行为。以下是精选的差异列表：

类：

允许性能优化（const构造函数，operator ==覆盖，更精细的重建）

有热装

集成到小部件检查器（debugFillProperties）

可以定义键

可以使用上下文API

确保所有小部件都以相同的方式使用（始终是构造函数）

确保在两个不同的布局之间进行切换可以正确处理资源（功能可以重用某些先前的状态）

功能：

更少的代码（甚至在那里，我都制作了代码生成器以使类与函数一样小：functional_widget）

？

结论应该已经很清楚了：

不要使用函数创建小部件。

Answer 2

调用Flutter小部件时，请确保使用const关键字。例如const MyListWidget();