flutter中的生命周期

开篇

与iOS的ViewController、Android的Activity一样，Flutter中的Widget也存在生命周期，并且通过State来提现。而App则是一个特殊的Widget，除了需要处理视图显示的各个阶段，还需要应对应用从启动到退出所经历的各个状态。

State生命周期

State的生命周期，指的是在用户参与的情况查下，其关联的Widget所经历的从创建到显示再到更新最后到停止，直至销毁的各个过程阶段。 这些不同的阶段涉及到的特定的任务处理，正确理解State的生命周期至关重要，State的生命周期流程图图，如下所示：

从图中可以看到，State的生命周期可以分为3个阶段：创建、更新、销毁。下面将介绍每一个阶段的具体流程

创建

State初始化时会依次执行：构造方法 -> initState -> didChangeDependencies -> build，随后完成页面渲染

• 构造方法是State生命周期的起点，Flutter会通过调用StatefulWidget.createState()来创建一个State。我们可以通过构造方法，来接受父Widget传递的初始化UI配置数据，这些配置数据，决定了Widget最初的呈现效果
• initState，会在State对象被插入视图树的时候调用，这个函数在State的生命周期中只会被调用一次，所以我们可以在这里做一些初始化工作，比如为状态变量设定默认值等
• didChangeDependencies则用来专门处理State对象依赖关系变化，会在initState()调用结束后，被Flutter调用
• build作用是构建视图，经过以上步骤，Framework认为State已经准备好，于是调用build。我们需要再这个函数中，根据俯视图传递过来的初始化配置数据以及State的当前状态，创建一个Widget，然后返回

更新

Widget的状态更新，主要由3个方法触发：setState、didChangeDependencies与didUpdateWidget。

• setState 当状态数据发生变化时，我们通过调用这个方法更新UI
• didChangeDependencies State对象的依赖关系发生变化后，Flutter会回调这个方法，随后触发组件构建。典型的场景就是：系统语言或应用主题改变时，系统会通知State执行didChangeDependencies回调方法
• didUpdateWidget 当Widget的配置发生变化是，比如父Widget触发重建，热重载是，系统会调用这个函数

一旦这三个方法被调用，Flutter就回销毁旧的Widget，并调用build方法重建Widget

销毁

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

• 当组件的可见状态发生变化是，deactivate函数会被调用，这是State会被暂时从视图树种移除。页面切换是，由于State对象在视图树种的位置发生了变化，需要先暂时移除后再重新添加，重新触发组件构建，因此这个函数也会被调用。
• 当State被永久的从视图树中移除是，Flutter会调用dispose函数，一旦到这个阶段，组件就要被销毁了，所以我们可以在这里进行最终的资源释放，移除监听，清理环境等等。 下面列了集中常见常场景下的State生命周期图

下面这张表格也可以帮助我们理解记忆这些调用实际

App生命周期

视图的生命周期，定义了视图的加载到构建的全过程，其回调机制能够确保我们可以更具视图的状态选择合适的时间做恰当的事情，而App的生命周期，则定义了App从启动到退出的全过程 在原生Android、iOS开发中，有时我们需要再对应的App生命周期事件中做相应的处理，比如App从后台进入前台，从前台退出后台，或者在UI绘制完成后做一些处理。 这样的需求，在原生开发中，可以通过重写Activity、ViewController生命周期回调方法，或者是注册应用程序的相关通知来兼容App的生命周期并做相应的处理。而在Flutter中，我们可以利用WidgetsBindingObserver类，来实现同样的需求。 下面我们看看WidgetsBindingObserver中具体有哪些回调函数：

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>? locales) { }

  /// App生命周期变化回调
  void didChangeAppLifecycleState(AppLifecycleState state) { }

  /// 内存告警回调
  void didHaveMemoryPressure() { }

  /// Accessibility相关特性回调
  void didChangeAccessibilityFeatures() { }
}

生命周期回调

didChangeAppLifecycleState回调函数中，有一个参数类型为AppLifecycleState的枚举类型，这个枚举类型是Flutter对App生命周期状态的封装，它的常用状态包括：

• resumed：可见的，并能相应用户输入
• inactive：出于不活动状态，无法处理用户响应
• paused：不可见并不能响应用户的输入，后台保活

可以将App切前后台，控制台输出的App状态，可以发现：

• 从后台进入前台，App生命周期变化：AppLifecycleState.paused -> AppLifecycleState.inactive ->AppLifecycleState.resumed
• 从前台退出到后台，App生命周期变化：AppLifecycleState.resumed ->AppLifecycleState.inactive - >AppLifecycleState.paused

我们可以通过下面的这张图直观的了解状态切换过程

帧绘制回调

除了需要监听App的生命周期回调做相应处理外，根据不同的需求，我们需要再组件宣讲之后做一些与显示安全相关的操作，在iOS中，可以通过GCD的方法，让操作在下一个RunLoop执行，在Android中，可以通过View.post()插入消息队列，来保证在组件渲染后进行相关操作。在Flutter中实现同样的需求会更简单：使用WidgetsBinding来实现即可 WidgetsBinding提供了单词Frame绘制回调和实时Frame绘制回调两种机制来满足不同的需求场景：

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

WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
  print("单次frame绘制的回调");
});

• 实时Frame绘制回调，则通过addPersistentFrameCallback实现，这个函数会在每次绘制Frame结束后进行回调，可以用作FPS监测。

WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
  print("实时frame绘制回调");
});