Flutter 中的生命周期分析

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 1,096 | 阅读时长 ≈ 5

本篇主要介绍Flutter中的相关生命周期 分为 widget生命周期、app生命周期

Widget生命周期

flutter中widget主要分为 StatelessWidget 和 StatefulWidget 两种 二者生命周期不太一样

StatelessWidget(无状态)

如果一个控件自身状态不会去改变，创建了就直接显示，不会有色值、大小或者其他属性的变化，这种widget一般都是继承自StatelessWidget，常见的有Container、ScrollView等，生命周期只有 build

1
2
3
4
5
6
7
8
class Frog extends StatelessWidget {
  const Frog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

build是用来创建widget的，但是因为build在每次刷新时候都会调用，通常需要把业务逻辑写到构造函数中

StatefulWidget (有状态)

需要持有状态 State，这里面包含了一系列生命周期方法

1
2
3
4
5
6
7
8
9
10
11
12
13
class YellowBird extends StatefulWidget {
  const YellowBird({ Key key }) : super(key: key);

  @override
  _YellowBirdState createState() => new _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFFFFE306));
  }
}

官网示意图如下
image.png

在网上看到一个更加下详细的

image.png

大致可以划分3个阶段：

  • 初始化

构造函数 > initState > didChangeDependencies > Widget build , 此时页面加载完成。

  • 状态变化
  • 组件移除

组件移除，例如页面销毁的时候会依次执行：deactivate > dispose

名称 描述 调用次数
createState createState 是 StatefulWidget 里创建 State 的方法，当要创建新的 StatefulWidget 的时候，会立即执行 createState，而且只执行一次 1次
initState initState 是 StatefulWidget 创建完后调用的第一个方法，而且只执行一次，类似于 Android 的 onCreate、iOS 的 viewDidLoad()，所以在这里 View 并没有渲染，但是这时 StatefulWidget 已经被加载到渲染树里了，这时 StatefulWidget 的 mount的值会变为 true，直到 dispose调用的时候才会变为 false。可以在 initState里做一些初始化的操作。 1次
didChangeDependencies 1、当 StatefulWidget 第一次创建的时候，didChangeDependencies方法会在 initState方法之后立即调用，之后当 StatefulWidget 刷新的时候，就不会调用了，
2、或者你的 StatefulWidget 依赖的 InheritedWidget 发生变化之后，didChangeDependencies才会调用，所以 didChangeDependencies有可能会被调用多次。		 1次或多次
build 在 StatefulWidget 第一次创建的时候，build方法会在 didChangeDependencies方法之后立即调用，另外一种会调用 build方法的场景是，每当 UI 需要重新渲染的时候(setState触发)，build都会被调用，所以 build会被多次调用，然后 返回要渲染的 Widget。千万不要在 build里做除了创建 Widget 之外的操作，因为这个会影响 UI 的渲染效率 多次
didUpdateWidget 祖先节点rebuild widget时调用，当组件改变状态时就会调用,
需要注意的是，涉及到controller的变更，需要在这个函数中移除老的controller的监听，并创建新controller的监听。
 1次或多次
deactivate 当要将 State 对象从渲染树中移除的时候，就会调用 deactivate生命周期，这标志着 StatefulWidget 将要销毁，但是有时候 State 不会被销毁，而是重新插入到渲染树种 1次或多次
dispose 当 View 不需要再显示，从渲染树中移除的时候，State 就会永久的从渲染树中移除，就会调用 dispose生命周期，这时候就可以在 dispose里做一些取消监听、动画的操作，和 initState是相反的 1次

这里补充一个，addPostFrameCallback，是 StatefulWidge 渲染结束的回调，只会被调用一次，之后 StatefulWidget 需要刷新 UI 也不会被调用，addPostFrameCallback的使用方法是在 initState里添加回调：

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

App生命周期

在 window.dart中有枚举类 AppLifecycleState

1
2
3
4
5
6
7
8
9
enum AppLifecycleState {
  resumed,
  
  inactive,
  
  paused,

  suspending,
}

如果想要知道Flutter App的生命周期，比如前台、后台就需要使用WidgetsBindingObserver 使用方法如下

State的类mix WidgetsBindingObserver，覆写didChangeAppLifecycleState

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
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
    @override
  	void initState(){
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  
  	@override
  	void dispose() {
    // TODO: implement dispose
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
  
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
      // went to Background
    }
    if (state == AppLifecycleState.resumed) {
      // came back to Foreground
    }
  }
}


参考

0%