flutter 生命周期详解_flutter 页面生命周期

---

简介

众所周知，程序是有生命周期的，那么flutter 的生命周期是什么呢？
flutter 的生命周期大体可分为三大阶段：初始化阶段、状态变化阶段、销毁阶段。

然而在这三个阶段中，又分如下两个部分：

1. widget 生命周期
2. APP 生命周期

---

一、widget 生命周期

在widget 生命周期中，又分为两大类：

1. StatelessWidget 无状态组件

   StatelessWidget 的生命周期，只有build 过程。build 是用来创建widget 的，每次在页面刷新时都会调用。

2. StatelessFulWidget 有状态组件

   StatelessFulWidget 的生命周期，我们可以从上面的图中，直接看出来，下面简单的记录一下

   • createState：StatelessFulWidget中创建state 的方法，当StatelessFulWidget 被调用时会立即执行 createState。

   • initState：state 初始化时调用，我们大多数都是这个方法中执行state 变量的初始赋值等操作，如：和服务器做交互，返回数据使用 setState() 来设置state ，而且initState 只会执行一次。

   • didChangeDependcies：会在 initState 后立即执行，之后会在依赖的state 发生变化后执行，这里的state 指的是InheritedWidget，所以didChangeDependcies 会执行多次。

   • build：会在didChangeDependcies 执行之后立即执行，之后会在setState() 方法刷新时，会再次调用build 方法，进行页面重新绘制。build 也会执行多次，由于build 会多次调用，所以只能做返回 widget 的函数，避免多次执行导致程序状态异常。

   • addPostFrameCallback： addPOSTFragmentCallback 是 StatelessFulWidget 渲染结束之后的回调，只会调用一次，一般的是initState 中添加回调方法

     import 'package:flutter/scheduler.dart';
     @override
     void initState() {
       super.initState();
       SchedulerBinding.instance.addPostFrameCallback((_) => {});
     }
     1
     2
     3
     4
     5
     6

   • didUpdateWidget： 主要是在组件重新构建时调用，比如热重装，父组件发生 build 的情况下，子组件该方法才会被调用，其次该方法调用之后一定会再调用本组件中的 build 方法。

   • deactivate： 在组件移除结点时调用，如果该组件被移除结点，然后没有插入到其他的结点上时，该组件将会调用 dispose 永久移除。

   • dispose： 永久移除组件，并释放资源。

整个生命周期的过程大致可以分成四个部分：

1. 初始化阶段，包括两个生命周期函数 createState 、initState
2. 组件创建阶段，包括两个生命周期函数 didChangeDependcies 、build
3. 触发多次 build，这个阶段可能是由 didChangeDependencies、setState 或者 didUpdateWidget 而引发的组件重新 build ，在组件运行过程中会多次被触发，这也是优化过程中需要着重需要注意的点
4. 组件销毁阶段，包括两个生命周期函数 deactivate、dispose

import 'package:flutter/material.dart';
/// 创建有状态测试组件
class TestStatefulWidget extends StatefulWidget {
  @override
  createState() {
    print('create state');
    return TestState();
  }
}
/// 创建状态管理类，继承状态测试组件
class TestState extends State<TestStatefulWidget> {
  /// 定义 state [count] 计算器
  int count = 1;
  /// 定义 state [name] 为当前描述字符串
  String name = 'test';
  @override
  initState() {
    print('init state');
    super.initState();
  }
  @override
  didChangeDependencies() {
    print('did change dependencies');
    super.didChangeDependencies();
  }
  @override
  didUpdateWidget(TestStatefulWidget oldWidget) {
    count++;
    print('did update widget');
    super.didUpdateWidget(oldWidget);
  }
  @override
  deactivate() {
    print('deactivate');
    super.deactivate();
  }
  @override
  dispose() {
    print('dispose');
    super.dispose();
  }
  @override
  reassemble(){
    print('reassemble');
    super.reassemble();
  }
  /// 修改 state name
  void changeName() {
    setState(() {
      print('set state');
      this.name = 'flutter';
    });
  }
  @override
  Widget build(BuildContext context) {
    print('build');
    return Column(
      children: <Widget>[
        FlatButton(
          child: Text('$name $count'), // 使用 Text 组件显示描述字符和当前计算
          onPressed:()=> this.changeName(), // 点击触发修改描述字符 state name
        )
      ],
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

二、APP 生命周期

APP 的生命周期通过 WidgetsBindingObserver 的 didChangeAppLifecycleState 来获取。通过该接口可以获取是生命周期在AppLifecycleState类中。

AppLifecycleState就是App的生命周期，包含四个：

• resumed：可见并能相应用户的输入，同安卓中的onResume
• inactive：处于并不活跃的状态，无法处理用户响应，同安卓中的onPause
• **paused：**不可见并不能响应用户的输入，但是在后台继续活动中，同安卓的onStop

APP 生命周期调试方式：

初次打开widget时，不执行AppLifecycleState的回调；
按home键或Power键， AppLifecycleState inactive ----> AppLifecycleState pause
从后台到前台：AppLifecycleState inactive —> ApplifecycleState resumed
back键退出应用： AppLifecycleState inactive —> AppLifecycleState paused

---

总结

本篇文章记录了flutter 中的两个主要生命周期，每个周期的实际意义，这样我们就可以在项目不断的阶段，做不同的操作了，感谢大家的检阅。