Flutter开发者

StatefulWidget与State

2020-05-18

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

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章