Flutter 的生命周期

- 日理万妓 2022-12-24 03:57 210阅读 0赞

## 前言 ##

如果你是 Android、iOS、React、Vue 的开发人员，那么你一定不会对生命周期感到陌生，当你在学习 Flutter 的时候，Flutter 也有自己的生命周期。本篇文章就讲讲 Flutter 的生命周期，从而知道应该在哪里来写业务逻辑。

## Flutter 的生命周期 ##

Flutter 的生命周期分为两个部分：

1.  Widget 的生命周期
2.  App 的生命周期

Flutter 里的 Widget 指的就是 View，所以 Widget 的生命周期就是 View 的创建和销毁等，但是如果你想知道 App 是在前台还是后台，这时就需要用到 App 的生命周期。

### Widget 的生命周期 ###

Flutter 里的 Widget 分为 StatelessWidget 和 StatefulWidget 两种，这两种 Widget 的生命周期是不一样的，我们接下来具体来看。

StatelessWidget 的生命周期

StatelessWidget 的生命周期只有一个，就是：

*  **build**
    
    build 是用来创建 Widget 的，但因为 build 在每次界面刷新的时候都会调用，所以不要在 build 里写业务逻辑，可以把业务逻辑写到你的 StatelessWidget 的构造函数里。
    
    StatelessWidget 的 build 函数代码如下：
    
        class TestWidget extends StatelessWidget{
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            print('StatelessWidget build');
            return Text('Test');
          }
        }
        复制代码

StatefulWidget 的生命周期

StatefulWidget 的生命周期比较复杂，依次为：

*  **createState**
 *  **initState**
 *  **didChangeDependencies**
 *  **build**
 *  **addPostFrameCallback**
 *  **didUpdateWidget**
 *  **deactivate**
 *  **dispose**

接下来具体介绍一下各个生命周期。

*  **createState**
    
    createState 是 StatefulWidget 里创建 State 的方法，当要创建新的 StatefulWidget 的时候，会立即执行 createState，而且只执行一次，createState 必须要实现：
    
        class MyScreen extends StatefulWidget {
          @override
          _MyScreenState createState() => _MyScreenState();
        }
        复制代码
 *  **initState**
    
    前面的 createState 是在创建 StatefulWidget 的时候会调用，initState 是 StatefulWidget 创建完后调用的第一个方法，而且只执行一次，类似于 Android 的 onCreate、iOS 的 viewDidLoad()，所以在这里 View 并没有渲染，但是这时 StatefulWidget 已经被加载到渲染树里了，这时 StatefulWidget 的 **mount** 的值会变为 true，直到 **dispose** 调用的时候才会变为 false。可以在 **initState** 里做一些初始化的操作。
    
    在 override **initState** 的时候必须要调用 super.initState()：
    
        @override
        void initState() {
          super.initState();
          ...
        }
        复制代码
 *  **didChangeDependencies**
    
    当 StatefulWidget 第一次创建的时候，**didChangeDependencies** 方法会在 **initState** 方法之后立即调用，之后当 StatefulWidget 刷新的时候，就不会调用了，除非你的 StatefulWidget 依赖的 InheritedWidget 发生变化之后，**didChangeDependencies** 才会调用，所以 **didChangeDependencies** 有可能会被调用多次。
 *  **build**
    
    在 StatefulWidget 第一次创建的时候，**build** 方法会在 **didChangeDependencies** 方法之后立即调用，另外一种会调用 **build** 方法的场景是，每当 UI 需要重新渲染的时候，**build** 都会被调用，所以 **build** 会被多次调用，然后 返回要渲染的 Widget。千万不要在 **build** 里做除了创建 Widget 之外的操作，因为这个会影响 UI 的渲染效率。
 *  **addPostFrameCallback**
    
    **addPostFrameCallback** 是 StatefulWidge 渲染结束的回调，只会被调用一次，之后 StatefulWidget 需要刷新 UI 也不会被调用，**addPostFrameCallback** 的使用方法是在 **initState** 里添加回调：
    
        import 'package:flutter/scheduler.dart';
        @override
        void initState() {
          super.initState();
          SchedulerBinding.instance.addPostFrameCallback((_) => {});
        }
        复制代码
 *  **didUpdateWidget**
    
    **didUpdateWidget** 这个生命周期我们一般不会用到，只有在使用 key 对 Widget 进行复用的时候才会调用。
 *  **deactivate**
    
    当要将 State 对象从渲染树中移除的时候，就会调用 **deactivate** 生命周期，这标志着 StatefulWidget 将要销毁，但是有时候 State 不会被销毁，而是重新插入到渲染树种。
 *  **dispose**
    
    当 View 不需要再显示，从渲染树中移除的时候，State 就会永久的从渲染树中移除，就会调用 **dispose** 生命周期，这时候就可以在 **dispose** 里做一些取消监听、动画的操作，和 **initState** 是相反的。

### App 的生命周期 ###

如果想要知道 Flutter App 的生命周期，例如 Flutter 是在前台还是在后台，就需要使用到 **WidgetsBindingObserver** 了，使用方法如下：

1.  State 的类 mix WidgetsBindingObserver：
    
        class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
            ...
        }
        复制代码
2.  在 State 的 **initState** 里添加监听：
    
        @override
          void initState(){
            super.initState();
            WidgetsBinding.instance.addObserver(this);
          }
        复制代码
3.  在 State 的 **dispose** 里移除监听：
    
        @override
          void dispose() {
            // TODO: implement dispose
            super.dispose();
            WidgetsBinding.instance.removeObserver(this);
          }
        复制代码
4.  在 State 里 override **didChangeAppLifecycleState**
    
        @override
        void didChangeAppLifecycleState(AppLifecycleState state) {
          super.didChangeAppLifecycleState(state);
          if (state == AppLifecycleState.paused) {
            // went to Background
          }
          if (state == AppLifecycleState.resumed) {
            // came back to Foreground
          }
        }
        复制代码

AppLifecycleState 就是 App 的生命周期，有：

*  resumed
 *  inactive
 *  paused
 *  suspending