项目地址：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并显示在页面上。下面我们运行代码，观察通过日志输出详情分析组件的生命周期函数执行情况。

ios模拟器运行截图

程序运行起来之后什么都不干，我们首先再来查看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()等回调函数。

acticuty生命周期(图片来源于https://developer.android.com/guide/components/activities/activity-lifecycle.html )
与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状态。

我们将上述执行直接总结起来，分析得出以下生命周期图：

StatefulWidget生命周期

4、结束语

好啦，就将这么多了。没有讲清楚的地方请诸位多包涵，也欢迎提出修改意见。