每日一题 Flutter#12 | StatefulWidget 从诞生到状态类build 的流程
最近在着手开发我的 《匠心星问》 ，它定位是一款 题库 应用，将集题目浏览、发布、解答、做题为一体。打算第一步先以 Flutter 为核心，准备题库资源。于是诞生《每日一题》 系列，准备精心设计一些 Flutter 的问题与解答，作为题库的养料。本文的焦点是探讨:
说说 StatefulWidget 从诞生到状态类 build 的流程
在 Flutter 中，build 函数是自定义组件最核心的部分，负责构建和组合 UI 界面。但它的触发是 Flutter 框架内部的行为，理解 build 函数的触发时机，不仅有助于我们更清晰地把握界面构建流程，也能够加深对 Flutter 框架运行逻辑的理解。
| - | |
|---|---|
|
|
|
1.调试案例介绍
这里以最简单的颜色展示为案例来介绍，如下所示：定义 MyApp 作为入口，其中展示 ColorAlphaChangeableView 组件 。我们将专注于 ColorAlphaView 从诞生到对应状态类 build 的流程：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ColorAlphaView(color: Colors.blue);
}
}
ColorAlphaView 可以接收一个颜色值，界面上展示这个颜色。在点击时， 该颜色的透明度在 0.5 和 1 切换，如下所示：
class ColorAlphaView extends StatefulWidget {
final Color color;
const ColorAlphaView({super.key, required this.color});
@override
State<ColorAlphaView> createState() => _ColorAlphaViewState();
}
class _ColorAlphaViewState extends State<ColorAlphaView> {
late Color _activeColor = widget.color;
void toggleColor() {
if (_activeColor.a == 1) {
_activeColor = widget.color.withValues(alpha: 0.5);
} else {
_activeColor = widget.color;
}
setState(() {});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: toggleColor,
child: ColoredBox(color: _activeColor),
);
}
}
1. StatefulWidget 对象的创建
首先把断点放在 ColorAlphaView 的构造函数上，可以看到对象创建时的方法栈的调用情况。结构如下所示：
它是在 MyApp#build 中被触发的，也就是说：父级组件在构建 (build) 的过程中会实例化子组件。
2. State 状态类对象的创建
将断点放在 ColorAlphaView#createState 上，可以看到 State 对象创建的时机。
从方法栈中可以看出：状态里是在 StatefulElement 对象实例化中被创建的。StatefulElement 的实例化关键在 Element.inflateWidget 方法中。
此时元素是 MyApp 对应的 StatelessElement，当它要更新子节点时。子节点对应的组件(比如这里的 ColorAlphaView) 就会触发 createElement, 创建对应的 StatefulElement 对象。
3. State#build 的触发时机
在 ColorAlphaView 创建完 StatefulElement 元素对象之后，该元素会紧接着触发 mount 方法。从方法栈中可以看出，元素挂载会触发首次 build 构建逻辑:
StatelessElement 的 build 方法中，会触发其持有的 state 对象的 build 回调。并将自身作为构建上下文作为函数入参。
到这里，大家可以结合一下 ColorAlphaView 组件的创建、对应 State 对象的创建、对应 StatefulElement 的创建。自己整理一下这个问题的答案，并想一想 StatefulWidget、State 和 StatefulElement 之间的关系。
5. 总结
最后，从头到尾梳理一下，StatefulWidget 从诞生到状态类 build 的完整流程：
Element.performRebuild # 父元素节点更新子节点
Element.build # 组件对象诞生
Element.inflateWidget # 生成子元素节点
Widget.createElement() # 创建子元素节点
StatefulElement #实例化
State #状态类对象实例化
Element.mount() # 创建子元素节点开始装在
[Stateful]Element._firstBuild -> rebuild -> performRebuild -> build # 触发元素构建流
State.build # 触发状态类构建
如果你有其他的看法，或者有什么想要的题目、或者想提供题目和答案，都欢迎在评论区留言。更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站 。