Hellom's Studio.

flutter 之页面生命周期

flutter
字数统计: 503阅读时长: 2 min
2019/08/02 Share

StatelessWidget 只有 createElement 和 build 两个生命周期

所以重点了解下 StatefulWidget

StatefulWidget 的生命周期方法按照时期不同可分为三组：

初始化时期

createState

  • 当构建一个新的 StatefulWidget 会立刻调用

  • 并且这个方法必须被覆盖

1
2
3
4
5
6
e.g.

class WidgetLifecycle extends StatefulWidget {
  @override
  _WidgetLifecycleState createState() => _WidgetLifecycleState();
}

initState

  • 创建 widget 时调用的除构造方法外的第一方法

  • 类似于 Android的：onCreate() 和 IOS 的 viewDidLoad()

  • 这个方法中通常会做一些初始化工作 比如 channel的初始化 监听器的初始化等

1
2
3
4
5
6
7
e.g.

@override
  void initState() {
    print('---initState----');
    super.initState();
}

更新时期

didChangeDependencies

  • 当依赖的 State 对象改变时会调用：

    • 在第一次构建 widget 时，在 initState() 之后立即调用此方法

    • 如果 StatefulWidget 依赖于 InheritedWidget,那么当前的 State 所依赖 InheritedWidget 中的变量改变的时候会再次调用

1
2
3
4
5
6
7
e.g.

@override
  void didChangeDependencies() {
    print('---didChangeDependencies----');
    super.didChangeDependencies();
}

bulid

  • 这是一个必须实现的方法 在这里实现你要呈现的页面内容

  • 它会在 didChangeDependencies() 之后立即调用

  • 另外当调用 setState 后也会再次调用

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
e.g.

@override
Widget build(BuildContext context) {
    print('-------build------');
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter生命周期'),
        leading: BackButton(),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                setState(() {
                  count += 1;
                });
              },
              child: Text('点我',
                  style: TextStyle(fontSize: 26, color: Colors.white)),
            ),
            Text(count.toString()),
          ],
        ),
      ),
    );
}

didUpdateWidget

  • 是个不常用的组件 当父组件需要重新绘制时才会调用

  • 该方法会携带一个 oldWidget 参数 可以将其与当前的 Widget 进行对比 以便执行一些额外的逻辑

  • 例如： if ( oldWidget.xxx != widget.xxx )

1
2
3
4
5
6
7
e.g.

@override
  void didUpdateWidget(WidgetLifecycle oldWidget) {
    print('-------didUpdateWidget------');
    super.didUpdateWidget(oldWidget);
}

销毁时期

deactivate

  • 很少使用 在组件被移除时调用 在 dispose() 之前调用
1
2
3
4
5
6
7
e.g.

@override
  void deactivate() {
    print('-------deactivate------');
    super.deactivate();
}

dispose

  • 常用 组件被销毁时调用：

    • 通常在该方法中执行一些资源的释放工作

    • 比如 监听器的卸载 channel 的销毁等

1
2
3
4
5
6
7
e.g.

@override
  void dispose() {
    print('-------dispose------');
    super.dispose(); 
}
CATALOG
  1. 1. 初始化时期
    1. 1.1. createState
    2. 1.2. initState
  2. 2. 更新时期
    1. 2.1. didChangeDependencies
    2. 2.2. bulid
    3. 2.3. didUpdateWidget
  3. 3. 销毁时期
    1. 3.1. deactivate
    2. 3.2. dispose
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue