2020-12-03

转发：http://flutter.link/2020/05/18/StatefulWidget%E4%B8%8EState/

StatefulWidget与State

在前面的文章中我们通过StatelessWidget介绍了Widget构建与渲染的过程，虽然StatefulWidget构建与渲染的过程与StatelessWidget基本一致，但是由于StatefulWidget是有状态的组建在更新构建过程上会有一点稍微的不同，今天我们就来看下StatefulWidget是如何更新Widget，以及它是如何触发界面变更的。

StatefulWidget

首先来看下StatefulWidget，它是一个抽象类，当然它十分的简单。它和StatelessWidget一样它只有两个方法，都有一个createElement的方法，但是和StatelessWidget不同的是,StatelessWidget可以直接通过build方法来构建Widget，但是StatefulWidget没有build方法，所以它只能使用State的build来构建Widget。

StatelessWidget源码

1 2 3 4 5 6 7 8 9

abstract class StatelessWidget extends Widget { const StatelessWidget({ Key key }) : super(key: key); @override StatelessElement createElement() => StatelessElement(this); @protected Widget build(BuildContext context); }

StatefulWidget源码

1 2 3 4 5 6 7 8 9

abstract class StatefulWidget extends Widget { const StatefulWidget({ Key key }) : super(key: key); @override StatefulElement createElement() => StatefulElement(this); @protected State createState(); }

Element相关的东西我们前面已经讲过，今天就不在具体看了，下面我们来看看State是什么。

State生命周期

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

abstract class State<T extends StatefulWidget> with Diagnosticable { //初始化 void initState() {} //界面更新，Widget 的配置发生变化时，或热重载时，系统会回调该方法 void didUpdateWidget(covariant T oldWidget) {} //重新载入 void reassemble() {} //设置界面数据变更 void setState(VoidCallback fn) {} //视图不可见 void deactivate() {} //视图销毁 void dispose() {} Widget build(BuildContext context){} //tate 对象的依赖关系发生变化后，Flutter 会回调该方法，随后触发组件构建。State 对象依赖关系发生变化的典型场景：系统语言 Locale 或应用主题改变时，系统会通知 State 执行 didChangeDependencies 回调方法 void didChangeDependencies() {} void debugFillProperties(DiagnosticPropertiesBuilder properties) {} }

StatefulWidget的生命周期大致可分为三个阶段：

• 初始化：插入渲染树，这一阶段涉及的生命周期函数主要有createState、initState、didChangeDependencies和build。
• 运行中：在渲染树中存在，这一阶段涉及的生命周期函数主要有didUpdateWidget和build。
• 销毁：从渲染树中移除，此阶段涉及的生命周期函数主要有deactivate和dispose。

具体的声明周期调用过程如下：

我们还是用一个小例子来看下今天的例子

定义两个界面，第一个界面有一个StatefulWidget我们点击列表后触发setState方法进入第二个界面，第二个界面同样是一个StatefulWidget，为了直观的观察有状态组建的生命周期，我们给State给个阶段都打了个log。如“page1 initState”

首先第一次进入第一个界面会打印

1 2 3

I/flutter (26863): page1 initState I/flutter (26863): page1 didChangeDependencies I/flutter (26863): page1 build

当我们进入第二个界面时

1 2 3

I/flutter (26863): page2 initState I/flutter (26863): page2 didChangeDependencies I/flutter (26863): page2 build

当我们从第二个界面返回时

1 2	I/flutter (26863): page2 deactivate I/flutter (26863): page2 dispose

最后我们在第一个界面尝试下热更新

1 2	I/flutter (26863): page1 reassemble I/flutter (26863): page1 build

下面是相关生命周期的调用次数

生命周期	调用次数	调用时间
createState	1	组件创建时
initState	1	组件创建时
didChangeDependencies	>=1	组件创建或状态发生变化
build	>=1	组件创建或UI重新渲染
didUpdateWidget	>=1	组件创建或UI重新渲染
deactivate	>=1	State对象将要移除时
dispose	1	state对象被销毁

通常情况下，我们可以在initState方法中做一些初始化工作，然后在dispose方法中做一些销毁工作。

setState如何触发界面变更

在前面很多例子中我们多次使用到setState方法，来更新Element中的数据，每次当每次数据变更时我们触发setState方法，紧接着界面就跟着变化了，大家应该都知道这是setState触发了界面的刷新，但是setState到底有什么魔法可以触发界面重构与刷新呢？接下来我们就开具体看下。

在开始了解setState方法之前我们还需要来了解下一个枚举类_StateLifecycle，它是flutter中的一个私有类，用来表示State的生命周期。

1 2 3 4 5 6 7 8 9 10

enum _StateLifecycle { created, initialized, ready, defunct, }

• created表示State 的Create和方法已经执行，State.initState正在进行执行
• initialized表示State.initState已经执行，State.didChangeDependencies方法正在执行
• ready表示State已经完成构建
• defunct表示State.dispose方法已经执行，State即将销毁

好了，了解完了State的生命周期，我们接着去看setState方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

void setState(VoidCallback fn) { assert(fn != null); if (_debugLifecycleState == _StateLifecycle.defunct){ 抛出异常 } if (_debugLifecycleState == _StateLifecycle.created && !mounted){ 抛出异常 } final dynamic result = fn() as dynamic; if (result is Future){ 抛出异常 } _element.markNeedsBuild(); }

首先setState方法需要传入一个类型为VoidCallback的参数，其实就是一个匿名参数而异。

1	typedef VoidCallback = void Function();

所以现在你对这种写法是不是就不那么陌生了？

1 2 3

setState(() { _counter++; });

setState方法的执行流程：

1. 判断函数体是否为空，为空则不继续执行
2. 首先判断state生命周期的状态，如果是defunct状态就抛异常
3. 然后判断state状态如果是created而且此时的Element不为空(mounte实际上就是表示Element的状态)
4. 执行传入的函数体
5. 判断函数体返回是不是一个Future，如果是就抛异常提示处理
6. 调用Element的markNeedsBuild方法

0上面的1-5步流程都非常的简单，在弟6步调用markNeedsBuild方法。

1 2 3 4 5 6 7 8 9 10 11 12

void markNeedsBuild() { assert(_debugLifecycleState != _ElementLifecycle.defunct); if (!_active) return; assert(owner != null); assert(_debugLifecycleState == _ElementLifecycle.active); …… if (dirty) return; _dirty = true; owner.scheduleBuildFor(this); }

在markNeedsBuild方法中会经过一系列的判断，来判断当前是否需要重新构建Widget。在最后标记当前_dirty为true，并且调用scheduleBuildFor来重新构建Wdiget。

而scheduleBuildFor最终会调用onBuildScheduled来通知每个Element去构建Widget。

小结

1. StatefulWidget是由状态组建，我们可以使用setState方法来重新构建组建

2. StatefulWidget的Wdiget是通过State的Build方法构建的

3. setState方法将要重新构建的Element标记为duty然后通过scheduleBuildFor来重新构建Wdiget