Flutter 从浅入深理解生命周期

迷南。 2023-07-11 08:56 85阅读 0赞

### 为什么需要了解生命周期？ ###

在`Android`开发的时候，`App、Activity、Fragment`是有生命周期的，熟悉了生命周期之后我们就可以在适当的时机做适当操作。比如在`Android`中在执行到`OnDestory`生命周期是需要资源释放。

在`Flutter`中也是有生命周期的，主要有两个:

*  `Widget` 的生命周期
 *  `App` 的生命周期

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

上篇文章  
[Flutter 从浅入深理解 StatefulWidget 和 StatelessWidget  
][Flutter _ StatefulWidget _ StatelessWidget] 我们介绍了`Widget`主要有两类`StatelessWidget 和 StatefulWidget`

那么先来看`StatelessWidget`的生命周期，从源码中可以看到`StatelessWidget`的生命周期只有一个`build`方法。  
![源码截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
再来看`StatefulWidget`的生命周期，`StatefulWidget`是有状态的`Widget`，并依赖于`State`。其生命周期如下图：  
![https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlL2JiLzg0L2JiYTg4ZWJiNDRiN2ZkZDY3MzVmM2RkYjQxMTA2Nzg0LnBuZw?x-oss-process=image/format,png][https_imgconvert.csdnimg.cn_aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlL2JiLzg0L2JiYTg4ZWJiNDRiN2ZkZDY3MzVmM2RkYjQxMTA2Nzg0LnBuZw_x-oss-process_image_format_png]  
图片来源：[梁飞宇 -【Flutter学习】之 Flutter 的生命周期][-_Flutter_ Flutter]

从图中可以看出生命周期可以分为三部分：**创建、更新、销毁**

下面我们通过`AndroidStudio`在各个生命周期方法中打印日志，来查看一些场景下`Widget`的生命周期方法调用。

#### 页面创建 ####

`minePage`页面的创建过程如下图  
![在这里插入图片描述][20200307221335106.png]  
从打印的日志中可以看出`widget`创建走的生命周期和上图中的 第一部分：**创建** 是一致的。

#### 页面跳转 ####

此时点击跳转 `loginPage` 页面，两个页面的生命周期执行如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

从打印的日志可以看出，  
`loginPage` 执行了`createState、constrictor、initState、didChangeDependencied、build`生命周期之后，  
`minePage` 才执行`deactivate、didChangeDependencies、didUpdateWidget、build` 生命周期。

#### 点击返回键 ####

从`loginPage`页面返回上一个页面`minePage`，`Widget`的生命周期执行如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
从打印的日志可以看出，  
`minePage` 执行`deactivate、didChangeDependencies、didUpdateWidget、build` 生命周期之后，  
`loginPage` 执行了`deactivate`生命周期之后，  
`minePage` 又执行了`build` 生命周期，  
`loginPage` 又执行了`deactivate`生命周期。

#### setState() 方法调用之后 ####

从`loginPage`登录成功之后返回`minePage`并将用户名和头像使用`setState()`修改为网络数据。  
此时的生命周期打印如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]  
从打印的日志可以看出，在页面返回之后，也就是`setState`之后，  
`minePage` 生命周期执行了`didChangeDependencies、didUpdateWidget、build` 方法。

#### 小结 ####

<table> 
 <thead> 
  <tr> 
   <th>生命周期方法</th> 
   <th>调用时机</th> 
   <th>执行次数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createState</td> 
   <td>创建State对象前</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>constructor</td> 
   <td>创建State对象时</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>initState</td> 
   <td>当State 对象插入视图树之后</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>didChangeDepandencies</td> 
   <td>State 对象的依赖关系发生变化后</td> 
   <td>&gt;=1</td> 
  </tr> 
  <tr> 
   <td>build</td> 
   <td>State 改动之后</td> 
   <td>&gt;=1</td> 
  </tr> 
  <tr> 
   <td>setState</td> 
   <td>需要刷新 UI 时</td> 
   <td>&gt;=1</td> 
  </tr> 
  <tr> 
   <td>didUpdateWidget</td> 
   <td>当 widget 配置发生变化时，如调用 setState 触发</td> 
   <td>&gt;=1</td> 
  </tr> 
  <tr> 
   <td>deactivate</td> 
   <td>widget 不可见时</td> 
   <td>&gt;=1</td> 
  </tr> 
  <tr> 
   <td>dispose</td> 
   <td>widget 被永久移除</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

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

上面我们了解了`widget`的生命周期之后，现在来了解监听`App`的生命周期。

在 `Flutter` 中，我们可以利用 `WidgetsBindingObserver` 类，  
我们来看看 `WidgetsBindingObserver` 中具体有哪些回调函数：

通过查看`WidgetsBindingObserver`源码及参考[Flutter核心技术与实战][Flutter]专栏，我们可以找到如下一些信息：

abstract class WidgetsBindingObserver {
      //页面pop
      Future<bool> didPopRoute() => Future<bool>.value(false);
      //页面push
      Future<bool> didPushRoute(String route) => Future<bool>.value(false);
      //系统窗口相关改变回调，如旋转
      void didChangeMetrics() { }
      //文本缩放系数变化
      void didChangeTextScaleFactor() { }
      //系统亮度变化
      void didChangePlatformBrightness() { }
      //本地化语言变化
      void didChangeLocales(List<Locale> locale) { }
      //App生命周期变化
      void didChangeAppLifecycleState(AppLifecycleState state) { }
      //内存警告回调
      void didHaveMemoryPressure() { }
      //Accessibility相关特性回调
      void didChangeAccessibilityFeatures() {}
    }

我们可以看到`didChangeAppLifecycleState`是用于监听App 的生命周期变化  
那么如何实现监听`App`的生命周期呢？

#### 如何监听App的生命周期 ####

// 使用 with WidgetsBindingObserver
    class MinePageState extends State<MinePage> with WidgetsBindingObserver {
    
     @override
     void initState() {
       super.initState();
       //注册监听器
       WidgetsBinding.instance.addObserver(this);
       WidgetsBinding.instance.addPostFrameCallback((_){
         // 只回调一次
         print("单次Frame绘制回调");
       });
       WidgetsBinding.instance.addPersistentFrameCallback((_){
         //每帧都回调
         print("实时Frame绘制回调");
       });
     }
     
     /// 重写方法，实现App生命周期监听
      @override
      void didChangeAppLifecycleState(AppLifecycleState state) async {
        print("$state");
        if (state == AppLifecycleState.resumed) {
          // resumed 状态
        }
      }
      
    @override
      void dispose() {
        super.dispose();
        //移除监听器
        WidgetsBinding.instance.removeObserver(this);
      }
    }

#### App操作常见情景下生命周期方法调用 ####

例如：灭、亮屏以及点击 `Home` 键再返回`App`，会执行如下生命周期  
![在这里插入图片描述][20200308213738359.png]

*  resumed：可见的，并能响应用户的输入，如上图中的亮屏和从点击 home 键之后再启动 App 会调用。
 *  inactive：处在不活动状态，无法处理用户响应。
 *  paused：不可见并不能响应用户的输入，但是在后台继续活动中，如上图中的灭屏和点击 home 键之后会调用。

完~

[Flutter _ StatefulWidget _ StatelessWidget]: https://blog.csdn.net/ITxiaodong/article/details/86671157
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306145505609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc=,size_16,color_FFFFFF,t_70
[https_imgconvert.csdnimg.cn_aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlL2JiLzg0L2JiYTg4ZWJiNDRiN2ZkZDY3MzVmM2RkYjQxMTA2Nzg0LnBuZw_x-oss-process_image_format_png]: https://img-blog.csdnimg.cn/20200307214512845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc=,size_16,color_FFFFFF,t_70
[-_Flutter_ Flutter]: https://www.cnblogs.com/lxlx1798/p/11176322.html
[20200307221335106.png]: https://img-blog.csdnimg.cn/20200307221335106.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200307221506685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200308204333121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200308210618240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc=,size_16,color_FFFFFF,t_70
[Flutter]: https://time.geekbang.org/column/article/109490
[20200308213738359.png]: https://img-blog.csdnimg.cn/20200308213738359.png