【老孟Flutter】为什么 build 方法放在 State 中而不是在 StatefulWidget 中

老孟导读：此篇文章是生命周期相关文章的番外篇，在查看源码的过程中发现了这一有趣的问题，欢迎大家一起探讨。

Flutter 中Stateful 组件的生命周期：http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html

Flutter 中与平台相关的生命周期：http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html

博客中还有更多精彩文章，也欢迎加入 Flutter 交流群。

灵活性

将 build 方法放在 State 中比放在 StatefulWidget 中更具灵活性，比如说，AnimatedWidget 是 StatefulWidget 的子类，AnimatedWidget 是一个抽象类，其中有一个

Widget build(BuildContext context)

的抽象方法，此方法需要子类重写，AnimatedWidget 源代码如下：

abstract class AnimatedWidget extends StatefulWidget {.../// Override this method to build widgets that depend on the state of the/// listenable (e.g., the current value of the animation).@protectedWidget build(BuildContext context);/// Subclasses typically do not override this method.@override_AnimatedState createState() => _AnimatedState();...}

删除了一些代码，保留了重点代码。

试想一下，如果 build 方法放在 StatefulWidget 中，则 AnimatedWidget 中的 build 方法需要带一个 State 参数,如下：

abstract class AnimatedWidget extends StatefulWidget {.../// Override this method to build widgets that depend on the state of the/// listenable (e.g., the current value of the animation).@protectedWidget build(BuildContext context, AnimatedState state);/// Subclasses typically do not override this method.@override_AnimatedState createState() => _AnimatedState();...}

但 AnimatedState 是内部实现，并不需要开放给外部（开发者）,外部也不需要知道 AnimatedState 的内部实现。

闭包 this 指向异常

假设 build 方法在 StatefulWidget 中，StatefulWidget 的子类写法如下：

class MyWidget extends StatefulWidget {final Color color;@overrideWidget build(BuildContext context, MyWidgetState state) {print(\'${this.color}\');return Container();}}

此时的 this 指向的是 MyWidget 的实例，然后父组件改变颜色，重新构建 MyWidget 组件，前一个 MyWidget 的实例中的 this 依然指向前一个 MyWidget 的实例，颜色并未发生变化。

如果 build 方法在 State 中，代码如下：

class MyWidget extends StatefulWidget {final Color color;const MyWidget({Key key, this.color}) : super(key: key);@override_MyWidgetState createState() => _MyWidgetState();}class _MyWidgetState extends State<MyWidget> {@overrideWidget build(BuildContext context) {print(\'${widget.color}\');return Container();}}

同样，父组件改变颜色，重新构建 MyWidget 组件，此时框架更新了 State 对象的 widget 属性的引用，新的 MyWidget 实例和 $ {widget.color} 将显示绿色。