Flutter 生命周期

前提

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

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

Widget的生命周期

Flutter 里的 Widget 分为 StatelessWidget 和 StatefulWidget 两种。

StatelessWidget

• build

build 是用来创建 Widget 的，但因为 build 在每次界面刷新的时候都会调用，所以不要在 build 里写业务逻辑，可以把业务逻辑写到你的 StatelessWidget 的构造函数里。

e.g:

class TestWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print('StatelessWidget build');
    return Text('Test');
  }
}

StatefulWidget(State 生命周期)

⚠️Flutter 生命周期都体现在 State 中,StatefulWidget 会要求提供一个含有视图树的 State。

image

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

• createState
• initState
• didChangeDependencies
• build
• addPostFrameCallback
• setState
• didUpdateWidget
• deactivate
• dispose

• createState

createState 是 StatefulWidget 里创建 State 的方法，当要创建新的 StatefulWidget 的时候，会立即执行 createState，而且只执行一次，createState 必须要实现：

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

• 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 有可能会被调用多次。

@override
  void 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

当 Widget 的配置发生变化时，比如，父 Widget 触发重建（即父 Widget 的状态发生变化时），Hot-reload时，系统会调用这个函数。这个函数调用后，会调用 build()。

• deactivate

当 State 被暂时从视图树中移除时，会调用这个函数。页面切换时，也会调用它，因为此时 State 在视图树中的位置发生了变化，需要先暂时移除后添加。
⚠️注意，重写的时候必须要调用 super.deactivate()。

• dispose

当 State 被永久的从视图树中移除时，Flutter 会调用 dispose 函数。而一旦到这个阶段，组件就要被销毁了，所以我们可以在这里进行最终的资源释放、移除监听、清理环境等等。
⚠️注意，重写的时候必须要调用 super.dispose()。

• setState

当状态数据发生变化时，通过调用这个方法通知 Flutter 更新重构 Widget，它会触发 build() 。

举例说明，如图所示：

image

上图所示：

• 第一个图展示了当父 Widget 状态发生变化时，父子双方共同的生命周期变化；
• 第二、三图展示页面切换时，两个关联的 Widget 的生命周期函数是如何响应的。

从功能，调用时机和调用次数的维度总结：

image

APP生命周期

App 生命周期定义了 App 从启动到退出的全过程，其回调机制能够让我们可以根据 App 状态选择合适的时机做自己想做的东西。在 Flutter 中，可以利用 WidgetsBindingObserver 类，实现监听APP状态的目的。

WidgetsBindingObserver 类中的回调函数：

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

• didChangeAppLifecycleState(生命周期回调)
  didChangeAppLifecycleState 回调函数中，有一个参数类型为 AppLifecycleState 的枚举类，这个枚举类是 Flutter 对 App 生命周期状态的封装。它的常用状态包括 resumed、inactive、paused 这三个。

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

当切换前、后台时，控制台输入打印 App 状态如下：

• 从后台切入前台，控制台打印的 App 生命周期变化如下: AppLifecycleState.paused > AppLifecycleState.inactive > AppLifecycleState.resumed；
• 从前台退回后台，控制台打印的 App 生命周期变化则变成了：AppLifecycleState.resumed > AppLifecycleState.inactive > AppLifecycleState.paused。

图片瞅瞅：

image

使用步骤：

1.State 的类 mix WidgetsBindingObserver：

class _MyHomePageState extends State with WidgetsBindingObserver {
    ...
}

2.在 State 的 initState 里添加监听：

@override
  void initState(){
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

3.在 State 的 dispose 里移除监听：

@override
  void 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
  }
....
}