Flutter页面生命周期理解与分析
侧边栏壁纸
  • 累计撰写 269 篇文章
  • 累计收到 275 条评论

Flutter页面生命周期理解与分析

Karry Bai
2021-09-20 / 0 评论 / 305 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年09月20日,已超过281天没有更新,若内容或图片失效,请留言反馈。

Flutter的页面生命周期,着重分析StatefulWidget这个组件。因为无状态的组件StatelessWidget只有createElementbuild两个生命周期方法,相对比较好理解,这里就不在赘述了。


StatefulWidget的生命周期方法按照时期顺序不同,可以分为三组,分别为:初始化时期更新时期销毁时期
请输入图片描述


1. 初始化时期的方法
createState
当我们构建一个新的StatefulWidget时,这个会立即调用;并且这个方法必须被覆盖
initState
这是创建Widget时调用的除构造方法外的第一个方法; 类似于Android的:onCreate() 与 IOS 的 viewDidLoad();在这个方法中通常会做一些初始化,比如channel的初始化,监听器的初始化等

2. 更新时期的方法
didChangeDependencies
当依赖的State对象改变时会调用。
在第一次构建widget时,在initState()之后立即调用此方法;
如果StatefulWidget依赖于InheritedWidget,那么当当前的State所依赖InheritedWidget中的变量改变时会再次调用它

拓展:InheritedWidget可以高效的将数据在Widget树中向下传递、共享;

build
每个State都需要实现的一个方法,这是一个必须实现的方法,在这里实现你要呈现的页面内容,它会在didChangeDependencies()之后立即调用。另外当调用setState后也会再次调用该方法。

didUpdateWidget
这是一个不常用到的生命周期方法,当父组件需要重新绘制时才会调用;该方法会携带一个oldWidget参数,可以将与当前的Widget进行对比以便执行一些额外的逻辑,如

if(oldWidget.xxx != widget.xxx) {...}

3. 销毁时期的方法
deactivate
很少使用,在组件被移除的时候调用dispose之前调用
dispose
通常,组件被销毁时调用。通常在方法中执行一些资源的释放工作,比如监听器的卸载、channel的销毁等

下面是关于Flutter生命周期的一个具体的代码理解,我在每个方法上面也做了注释,方便理解学习:

import 'package:flutter/material.dart';

/// Flutter Widget的生命周期重点讲解StatefulWidget的生命周期
/// 因为无状态的widget StatelessWidget只有createElement 与 build两个生命周期方法
/// StatefulWidget的生命周期方法按照时期不同可以分为三组:
/// 1、初始化时期
/// createState、initState
/// 2、更新时期
/// didChangeDependencies、build、didUpdateWidget
/// 3、销毁期
/// deactivate、dispose
class WidgetLifecycle extends StatefulWidget {
  // 当我们构建一个新的StatefulWidget时,这个会立即调用
  // 并且这个方法必须被覆盖
  @override
  _WidgetLifecycleState createState() => _WidgetLifecycleState();
}

class _WidgetLifecycleState extends State<WidgetLifecycle> {
  int _count = 0;

  /// 这是创建Widget时调用的除构造方法外的第一个方法
  /// 类似于Android的:onCreate() 与 IOS 的 viewDidLoad();
  /// 在这个方法中通常会做一些初始化,比如channel的初始化,监听器的初始化等
  @override
  void initState() {
    // TODO: implement initState
    print('------------initState---------------');
    super.initState();
  }

  /// 当依赖的State对象改变时会调用
  /// a 在第一次构建widget时,在initState()之后立即调用此方法
  /// b 如果StatefulWidget依赖于InheritedWidget,那么当 当前的State所依赖InheritedWidget中的变量改变时会再次调用它
  /// 拓展:InheritedWidget可以高效的将数据在Widget树中向下传递、共享;
  @override
  void didChangeDependencies() {
    print('--------------didChangeDependencies--------------');
    super.didChangeDependencies();
  }

  /// 每个State都需要实现的一个方法
  /// 这是一个必须实现的方法,在这里实现你要呈现的页面内容
  /// 它会在didChangeDependencies()之后立即调用
  /// 另外当调用setState后也会再次调用该方法
  @override
  Widget build(BuildContext context) {
    print('--------------build-------------');
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter页面生命周期'),
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back),
        ),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    _count++;
                  });
                },
                child: Text(
                  '点我',
                  style: TextStyle(fontSize: 26),
                )),
            Text('$_count')
          ],
        ),
      ),
    );
  }

  /// 这是一个不常用到的生命周期方法,当父组件需要重新绘制时才会调用;
  /// 该方法会携带一个oldWidget参数,可以将与当前的Widget进行对比以便执行一些额外的逻辑,如
  /// if(oldWidget.xxx != widget.xxx) {...}
  @override
  void didUpdateWidget(covariant WidgetLifecycle oldWidget) {
    print('--------------didUpdateWidget--------------');
    super.didUpdateWidget(oldWidget);
  }

  /// 很少使用,在组件被移除的时候调用dispose之前调用
  @override
  void deactivate() {
    print('-------------deactivate--------------');
    super.deactivate();
  }

  /// 通常,组件被销毁时调用
  /// 通常在方法中执行一些资源的释放工作,比如监听器的卸载、channel的销毁等
  @override
  void dispose() {
    print('------------dispose-------------');
    super.dispose();
  }
}
0

评论 (0)

取消