项目地址：https://github.com/Code-Yeong/FlutterDemo
1、引言
在开发flutter项目过程中我们肯定离不开组件，无论是布局、动画还是按钮、标签，这些在flutter中都由大大小小的组件构成。组件从创建、绘制到销毁的各个阶段都有不同的回调函数执行相应的任务，这些回调函数也构成了组件的生命周期。下面本文主要围绕着
StatefullWidget的生命周期展开讨论，希望对大家有所帮助。
2、StatefulWidget介绍
StatefulWidget是一个抽象类，使用时此组件只需要继承这个类即可，下面是StatefulWidget的源码：
abstract class StatefulWidget extends Widget {
/// Initializes [key] for subclasses.
const StatefulWidget({ Key key }) : super(key: key);
@override
StatefulElement createElement() => StatefulElement(this);
@protected
State createState();
}
在使用时，子类需要重写crateElement()函数和createState()，这两个函数的主要作用是：前者在element树中创建一个新的element,在此函数中用户无需做任何修改；后者的作用是创建出一个state用于存储组件的状态，值得注意的是同一个组件被创建多次，那么创建出的state数量和组件数一致，也就是说组件与state一一对应。
createState()函数的返回值是一个State类型的对象，因此我们需要在这个函数中创建并返回一个State类型的值，首先我们看看State对应的源码（这里删除了源码中的注释和一些无关的属性、函数，若有需要请对照官方文档阅读）：
abstract class State<T extends StatefulWidget> extends Diagnosticable {
@protected
@mustCallSuper
void initState() {
assert(_debugLifecycleState == _StateLifecycle.created);
}
@mustCallSuper
@protected
void didUpdateWidget(covariant T oldWidget) { }
@protected
@mustCallSuper
void reassemble() { }
@protected
void setState(VoidCallback fn) {
//.......
_element.markNeedsBuild();
}
@protected
@mustCallSuper
void deactivate() { }
@protected
@mustCallSuper
void dispose() {
assert(_debugLifecycleState == _StateLifecycle.ready);
assert(() { _debugLifecycleState = _StateLifecycle.defunct; return true; }());
}
@protected
Widget build(BuildContext context);
@protected
@mustCallSuper
void didChangeDependencies() { }
}
这里保留了几个与组件生命收起相关的函数，分别是initState()、didUpdateWidget()、deactivate()、dispose()、build()以及didChangeDependencies()，其作用就不细说，下面开始探究其生命周期。
3、StatefulWidget组件生命周期
首先我们创建了一个TELifeCycleOfState类继承自StatefulWidget，在它的两个回调函数种分别向控制台输出log，代码如下
class TELifeCycleOfState extends StatefulWidget {
@override
State createState() {
print("parent-->createState");
return _TELifeCycleOfState();
}
@override
StatefulElement createElement() {
print("parent-->createElement");
return StatefulElement(this);
}
}
然后在创建_TELifeCycleOfState类，继承自State类并重写其回调函数，同样我们在State的回调函数中分别向控制台打印log。
class _TELifeCycleOfState extends State<TELifeCycleOfState{
num _count = 0;
@override
void initState() {
super.initState();
print("parent-->initState");
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("parent-->didChangeDependencies");
}
@override
Widget build(BuildContext context) {
print("parent-->build");
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.of(context).pop();
}),
title: Text("Test lifeCycle"),
),
body: Container(
child: Center(
child: Text('${_count}'),
),
),
floatingActionButton: IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
_count++;
});
}),
);
}
@override
void dispose() {
print("parent-->dispose");
super.dispose();
}
@override
void deactivate() {
super.deactivate();
print("parent-->deactivate");
}
@override
void reassemble() {
super.reassemble();
print("parent-->reassemble");
}
@override
void didUpdateWidget(TELifeCycleOfState oldWidget) {
super.didUpdateWidget(oldWidget);
print("parent-->didUpdateWidget");
}
}
我们在页面中添加了一个floatingActionButton，每次点击这个按钮，计数_count的值加1并显示在页面上。下面我们运行代码，观察通过日志输出详情分析组件的生命周期函数执行情况。
程序运行起来之后什么都不干，我们首先再来查看log日志输出情况：
flutter: parent-->createElement
flutter: parent-->createState
flutter: parent-->initState
flutter: parent-->didChangeDependencies
flutter: parent-->build
然后接着点击右下角“+”按钮让计数加1，再观察日志输出情况：
flutter: parent-->createElement
flutter: parent-->createState
flutter: parent-->initState
flutter: parent-->didChangeDependencies
flutter: parent-->build
flutter: parent-->build
再接着按“home”件然程序进入后台，我们观察到日志没有任何变化，也就是说上述生命周期函数都没有被执行。
接着我们让程序再次进入前台执行，并推出页面，日志变化如下：
flutter: parent-->createElement
flutter: parent-->createState
flutter: parent-->initState
flutter: parent-->didChangeDependencies
flutter: parent-->build
flutter: parent-->build
flutter: parent-->deactivate
flutter: parent-->dispose
至此，组件生命周期暂时已经“结束”，我们总结一下，上述执行过程中，组件生命周期大致是这么个情况：
createElement -> createState -> initState -> didChangeDependencies -> build -> deactivate -> dispose
对比一下Android中Activity的生命周期（下图是从android官网摘取的图片），我们发现flutter组件的生命周期缺少了onPause()、onResume()等回调函数。
与
Activity相比StatefulWidget“缺少”了几个重要的生命周期函数，是不是就意味着组件压根儿就没有呢。别担心，其实StatefulWidget也可以有这几个生命周期函数，不过这几个函数不再State中，而是在WidgetsBindingObserver中，通过mixin的方式将该组件的接口引入进来之后，我们同样也能实现向Activity类似的生命周期。下面我们对代码进行相应的修改：
class _TELifeCycleOfState extends State<TELifeCycleOfState> with WidgetsBindingObserver {
num _count = 0;
@override
void initState() {
super.initState();
//新加内容
WidgetsBinding.instance.addObserver(this);
print("parent-->initState");
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("parent-->didChangeDependencies");
}
@override
Widget build(BuildContext context) {
print("parent-->build");
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.of(context).pop();
}),
title: Text("Test lifeCycle"),
),
body: Container(
child: Center(
child: TETextWidget(
count: _count,
),
),
),
floatingActionButton: IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
_count++;
});
}),
);
}
@override
void dispose() {
print("parent-->dispose");
//新加内容
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void deactivate() {
super.deactivate();
print("parent-->deactivate");
}
@override
void reassemble() {
super.reassemble();
print("parent-->reassemble");
}
@override
void didUpdateWidget(TELifeCycleOfState oldWidget) {
super.didUpdateWidget(oldWidget);
print("parent-->didUpdateWidget");
}
//新加内容
AppLifecycleState _state;
//新加内容
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
_state = state;
print("state is --> : $_state");
}
}
然后我们在重复以上几个步骤，得到一下日志输出：
flutter: parent-->createElement
flutter: parent-->createState
flutter: parent-->initState
flutter: parent-->didChangeDependencies
flutter: parent-->build
flutter: parent-->build
flutter: state is -> AppLifecycleState.inactive
flutter: state is -> AppLifecycleState.paused
flutter: state is -> AppLifecycleState.inactive
flutter: state is -> AppLifecycleState.resumed
flutter: parent-->deactivate
flutter: parent-->dispose
这里的inactive状态表示app进入了后台但可见，当完全不可见之后才执行paused。重新回到可见但不可操作时又会执行一次inactive ，之后再resumed进入running状态。
我们将上述执行直接总结起来，分析得出以下生命周期图：
4、结束语
好啦，就将这么多了。没有讲清楚的地方请诸位多包涵，也欢迎提出修改意见。
