首先来看下StatefulWidget,它是一个抽象类,当然它十分的简单。它和StatelessWidget一样它只有两个方法,都有一个createElement的方法,但是和StatelessWidget不同的是,StatelessWidget可以直接通过build方法来构建Widget,但是StatefulWidget没有build方法,所以它只能使用State的build来构建Widget。
StatelessWidget源码
abstract class StatelessWidget extends Widget { const StatelessWidget({ Key key }) : super(key: key); @override StatelessElement createElement() => StatelessElement(this); @protected Widget build(BuildContext context);}
StatefulWidget源码
abstract class StatefulWidget extends Widget { const StatefulWidget({ Key key }) : super(key: key); @override StatefulElement createElement() => StatefulElement(this); @protected State createState();}
Element相关的东西我们前面已经讲过,今天就不在具体看了,下面我们来看看State是什么。
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的生命周期大致可分为三个阶段:
我们还是用一个小例子来看下今天的例子
定义两个界面,第一个界面有一个StatefulWidget我们点击列表后触发setState方法进入第二个界面,第二个界面同样是一个StatefulWidget,为了直观的观察有状态组建的生命周期,我们给State每个阶段都打了个log。如“page1 initState”
首先第一次进入第一个界面会打印
I/flutter (26863): page1 initStateI/flutter (26863): page1 didChangeDependenciesI/flutter (26863): page1 build
当我们进入第二个界面时
I/flutter (26863): page2 initStateI/flutter (26863): page2 didChangeDependenciesI/flutter (26863): page2 build
当我们从第二个界面返回时
I/flutter (26863): page2 deactivateI/flutter (26863): page2 dispose
最后我们在第一个界面尝试下热更新
I/flutter (26863): page1 reassembleI/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方法,来更新Element中的数据,每次当每次数据变更时我们触发setState方法,紧接着界面就跟着变化了,大家应该都知道这是setState触发了界面的刷新,但是setState到底有什么魔法可以触发界面重构与刷新呢?接下来我们就来具体看下。
在开始了解setState方法之前我们还需要来了解下一个枚举类_StateLifecycle,它是flutter中的一个私有类,用来表示State的生命周期。
enum _StateLifecycle { created, initialized, ready, defunct,}
好了,了解完了State的生命周期,我们接着去看setState方法。
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的参数,其实就是一个匿名参数而异。
typedef VoidCallback = void Function();
所以现在你对这种写法是不是就不那么陌生了?
setState(() { _counter++;});
setState方法的执行流程:
上面的1-5步流程都非常的简单,在第6步调用markNeedsBuild方法。
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。