Flutter 生命周期

在之前的一篇文章 React 生命周期 是我在学习 React 之初总结的，那么现如今正处于学习 Flutter 之初，遂写了这篇 Flutter 生命周期。

谈起 React 生命周期都会默认是 Component 生命周期，那么 Flutter 中的生命周期是什么呢？

Flutter 一切皆 Widget，因此自然是 Widget 的生命周期，并是通过 State来体现。而 App 则是一个特殊的 Widget，除了需要处理视图显示的各个阶段（即视图的生命周期）之外，还需要应对应用从启动到退出所经历的各个状态（App 的生命周期）

State 生命周期

State 生命周期

如上图，State 生命周期可以分为三个阶段：创建，更新，销毁。

创建

依次执行： 构造方法 -> initState -> didChangeDependencies -> build，随后完成页面的渲染

• 构造方法：State 生命周期的起点，Flutter 会通过调用 StatefulWidget.createState() 来创建一个 State。可以通过构造方法来接收父 Widget 传递的初始化 UI 配置数据

• initState：在 State 对象被插入视图树的时候调用。在 State 生命周期中只会被调用一次

• didChangeDependencies：用来处理 State 对象依赖关系变化，会在 initState() 调用结束后被调用

• build：构建视图。经过以上步骤，Framework 认为 State已经准备好了，于是调用 build。需要根据父 Widget 传递的初始化数据，以及 State 当前状态，创建一个 Widget 并返回

更新

• setState：当状态数据发生变化时，调用该方法告诉 Flutter 数据变了

• didChangeDependencies：State 对象的依赖关系发生变化后，调用该方法，然后出发组件构建。例如：系统语言或主题变更

• didUpdateWidget：当 Widget 的配置发生变化。例如：父 Widget 的状态发生变化，热重载时

一旦👆这三个方法被调用，Flutter 就会销毁老 Widget，并调用 build() 重建 Widget

销毁

组件销毁相对简单，比如组件被移除，或是页面销毁的时候，系统会调用 deactivate() 和 dispose() 这两个方法

具体调用机制：

• 当组件的可见状态发生变化时，deactive 会被调用，State 会被暂时从视图树中移除。页面切换时，State 在视图树中的位置发生了变化，需要先暂时移除后再重新添加，重新触发组件重构，deactive 也会被调用

• State 被永久从视图树中移除时，dispose 会被调用。此时，组件就要被销毁，所以可以进行最终的资源释放、移除监听事件，等等

State生命周期方法对比

方法名	功能	调用时机	调用次数
构造方法	接收父 Widget 传递的初始UI数据	创建 State 时	1
initState	与渲染相关的初始化工作	在State被插入视图树时	1
didChangeDependencies	处理State对象依赖关系变化	initState 后及State对象依赖关系变化时	>=1
build	构建视图	State准备好数据需要渲染时	>=1
setState	触发视图重建	需要刷新UI时	>=1
didUpdateWidget	处理Widget的配置变化	父 Widget setState 触发子Widget重建	>=1
deactivate	组件被移除	组件不可见	>=1
dispose	组件被销毁	组件永久被移除	1

App 生命周期

App 的生命周期定义的是 App 从移动到退出的全过程

生命周期回调

didChangeAppLifecycleState 回调函数中，有一个参数类型为 AppLifecycleSate 的枚举类，该类封装了 App 生命周期状态。常用状态：resumed，inactive，paused

• resumed：可见的，响应用户输入
• inactive：处在不活动状态，无法处理用户响应
• paused：不可见并不能响应用户输入，但在后台继续活动中

App 切换前后台时状态变化：

• 从后台切入前台：AppLifecycleState.paused -> AppLifecycleState.inactive -> AppLifecycleState.resumed

• 从前台切入后台：AppLifecycleState.resumed -> AppLifecycleState.inactive -> AppLifecycleState.paused

App 切换前后台状态变化

帧绘制回调

除了需要监听 App 的生命周期回调做相应处理之外，还需要在组件渲染之后做一些与显示安全相关的操作

ios 中可以通过 dispatch_async((dispatch_get_main_queue), ^{...}) 让操作在下一个 RunLoop 执行；Android 可以通过 View.post() 插入消息队列，来保证在组件渲染后进行相关操作

Flutter 中，WidgetsBinding 提供了单次 Frame 绘制回调，以及实时 Frame 绘制回调两种机制

• 单次 Frame 绘制回调，通过 addPostFrameCallback 实现。会在当前 Frame 绘制完成后进行回调，并且只会回调一次，如果要再次监听需再设置

WidgetsBinding.instance.addPostFrameCallback((_){
    print("单次Frame绘制回调"); // 只回调一次
});

• 实时 Frame 绘制回调，通过 addPersistentFrameCallback 实现。在每次绘制 Frame 结束后进行回调

WidgetsBinding.instance.addPersistentFrameCallback((_){
  print("实时Frame绘制回调");//每帧都回调
});