Flutter 生命周期研究与应用

Flutter 生命周期包括了组件的生命周期以及App的生命周期。

一、组件生命周期

一个flutter组件主要分为无状态组件(StatelessWidget)和有状态组件(StatefulWidget)，无状态组件只在创建的时候渲染一次，创建完成后不能重新渲染，而有状态组件可以根据交互或数据变化等，进行多次渲染，本文组件生命周期专指有状态组件的生命周期。
组件生命周期主要是：createState、initState、didChangeDependencies、reassemble、didUpdateWidget、build、deactivate、dispose这几个函数，从函数名我们可以初步感知其作用，它们大致的流转关系及作用如图：


有状态组件生命周期简图.png

下面以一个简单的Demo验证这个流程
1.构建一个简单的MyApp:

import 'package:flutter/material.dart';
import 'package:flutterlifecycledemo/ui/home_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// 初始化state,只会在第一次构建组件时调用一次
  ///
  /// 在此期间可以执行State各变量的初始赋值
  /// 同时可以在此处调用网络请求,服务器返回数据后通过setState刷新页面,类似于iOS中的ViewDidLoad方法
  @override
  void initState() {
    super.initState();
    print('initState_MyApp');
  }
  /// 该组件所依赖的State发生变化时触发,或者在initState(组件首次创建)后触发
  ///
  /// 该组件所依赖的State指全局的State,例如语言和主题等
  /// 此方法会触发build
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies_MyApp');
  }

  /// 在debug模式下,每次热重载都会触发该函数
  ///
  /// 主要是在开发阶段在此增加一些debug代码,检查代码问题
  @override
  void reassemble() {
    super.reassemble();
    print('reassemble_MyApp');
  }

  /// 组件重新构建(如热重载),父组件发生build的情况下触发
  ///
  /// 注意:
  /// 父组件发生build,本组件(子组件)该方法才会被调用,并且该方法调用后一定会再调用本组件中的build方法
  /// 并且父组件首次创建不会触发
  @override
  void didUpdateWidget(MyApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget_HomePage');
  }

  /// 组件在被移除节点后被调用
  ///
  /// 如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用dispose永久移除
  @override
  void deactivate() {
    super.deactivate();
    print('deactivate_MyApp');
  }

  /// 永久移除组件,释放组件资源
  @override
  void dispose() {
    super.dispose();
    print('dispose_MyApp');
  }

  /// 构建需要渲染的widget,会被多次调用(会被setState/didChangeDependencies/didUpdateWidget触发)
  ///
  /// 只做返回Widget的相关逻辑
  @override
  Widget build(BuildContext context) {
    print('build_MyApp');
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff409eff),
        brightness: Brightness.light, // 默认状态栏颜色
      ),
      home: HomePage(),
    );
  }
}

2.HomPage实现:


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage();

  /// 创建state
  ///
  /// 当StatefulWidget被调用时会立即执行
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool showProgressHud = true;
  double cw = 60;
  /// 模拟加载数据
  void loadData(){
    // 5秒后调用setState
    Future.delayed(Duration(seconds: 5), (){
      setState(() {
        showProgressHud = false;
      });
    });
  }

  /// 初始化state,只会在第一次构建组件时调用一次
  ///
  /// 在此期间可以执行State各变量的初始赋值
  /// 同时可以在此处调用网络请求,服务器返回数据后通过setState刷新页面,类似于iOS中的ViewDidLoad方法
  @override
  void initState() {
    super.initState();
    print('initState_HomePage');
    loadData();
  }
  /// 该组件所依赖的State发生变化时触发,或者在initState(组件首次创建)后触发
  ///
  /// 该组件所依赖的State指全局的State,例如语言和主题等
  /// 此方法会触发build
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies_HomePage');
  }

  /// 在debug模式下,每次热重载都会触发该函数
  ///
  /// 主要是在开发阶段在此增加一些debug代码,检查代码问题
  @override
  void reassemble() {
    super.reassemble();
    print('reassemble_HomePage');
  }

  /// 组件重新构建(如热重载),父组件发生build的情况下触发
  ///
  /// 注意:
  /// 父组件发生build,本组件(子组件)该方法才会被调用,并且该方法调用后一定会再调用本组件中的build方法
  /// 并且父组件首次创建不会触发
  @override
  void didUpdateWidget(HomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget_HomePage');
  }

  /// 组件在被移除节点后被调用
  ///
  /// 如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用dispose永久移除
  @override
  void deactivate() {
    super.deactivate();
    print('deactivate_HomePage');
  }

  /// 永久移除组件,释放组件资源
  @override
  void dispose() {
    super.dispose();
    print('dispose_HomePage');
  }

  /// 构建需要渲染的widget,会被多次调用(会被setState/didChangeDependencies/didUpdateWidget触发)
  ///
  /// 只做返回Widget的相关逻辑
  @override
  Widget build(BuildContext context) {
    print('build_HomePage');
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello Flutter',style: TextStyle(color: Color(0xffffffff),fontSize: 16, fontWeight: FontWeight.bold),),
        centerTitle: true,
        actions: <Widget>[
          FlatButton( // 触发setState,showProgressHud=true,当前HomeConent组件会被移除
            child: Text('loadData',style: TextStyle(color:  Color(0xffffffff),fontSize: 14),),
            onPressed: (){
              setState(() {
                showProgressHud = true;
                loadData();
              });
            },
          ),
          FlatButton( // 增加cw值,并只触发setState,showProgressHud不变,当前SubHomePage组件不会被移除
            child: Text('click',style: TextStyle(color:  Color(0xffffffff),fontSize: 14),),
            onPressed: (){
              setState(() {
                cw += 10;
              });
            },
          ),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Color(0xffffffff),
        ),
        child: Center(
          child: showProgressHud ?
              CircularProgressIndicator() :
              Column(
                mainAxisAlignment: MainAxisAlignment.center ,
                children: <Widget>[
                  Container(width: cw, height: 44,color: Color(0xff889eff),),
                  SubHomePage()
                ],
              )

          ,
        ),
      ),
    );
  }
}

3.SubHomePage实现：


class SubHomePage extends StatefulWidget {
  @override
  _SubHomePageState createState() => _SubHomePageState();
}

class _SubHomePageState extends State<SubHomePage> {

  /// 初始化state,只会在第一次构建组件时调用一次
  ///
  /// 在此期间可以执行State各变量的初始赋值
  /// 同时可以在此处调用网络请求,服务器返回数据后通过setState刷新页面,类似于iOS中的ViewDidLoad方法
  @override
  void initState() {
    super.initState();
    print('initState_SubHomePage');
  }
  /// 该组件所依赖的State发生变化时触发,或者在initState(组件首次创建)后触发
  ///
  /// 该组件所依赖的State指全局的State,例如语言和主题等
  /// 子类很少重写这个方法,非必要情况不用重写此方法
  /// 此方法会触发build
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies_SubHomePage');
  }

  /// 在debug模式下,每次热重载都会触发该函数
  ///
  /// 主要是在开发阶段在此增加一些debug代码,检查代码问题
  @override
  void reassemble() {
    super.reassemble();
    print('reassemble_SubHomePage');
  }

  /// 组件重新构建(如热重载),父组件发生build的情况下触发
  ///
  /// 注意:
  /// 父组件发生build,本组件(子组件)该方法才会被调用,并且该方法调用后一定会再调用本组件中的build方法
  /// 并且父组件首次创建不会触发
  @override
  void didUpdateWidget(SubHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget_SubHomePage');
  }

  /// 组件在被移除节点后被调用
  ///
  /// 如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用dispose永久移除
  @override
  void deactivate() {
    super.deactivate();
    print('deactivate_SubHomePage');
  }

  /// 永久移除组件,释放组件资源
  @override
  void dispose() {
    super.dispose();
    print('dispose_SubHomePage');
  }

  /// 构建需要渲染的widget,会被多次调用(会被setState/didChangeDependencies/didUpdateWidget触发)
  ///
  /// 只做返回Widget的相关逻辑
  @override
  Widget build(BuildContext context) {
    print('build_SubHomePage');
    return Column(
      children: <Widget>[
        Container(height: 100,),
        Text('Welcome to flutter', style: TextStyle(color: Color(0xff333333), fontSize: 16),),
        Container(
          height: 10,
        ),
        FlatButton(
          onPressed: increaseAction,
          child: Text(
            'Increase',
            style: TextStyle(color: Color(0xffffffff), fontSize: 14),
          ),
          color: Color(0xff409eff),
        )
      ],
    );
  }

  void increaseAction(){
    setState(() {
    });
  }
}

页面效果：


IMG_1001CAC5603D-1.jpeg

首次加载控制台输出：


截屏2020-06-28 上午3.13.33.png

正好验证了首次加载有状态组件的生命周期，其中build_HomePage打印了两次，是因为HomePage在initState的时候调用了模拟网络请求方法loadData,在请求完毕后调用了setState,从而触发了HomePage的build。
接着点击导航栏上的loadData(属于HomePage的组件)按钮，触发:

FlatButton( // 触发setState,showProgressHud=true,当前SubHomePage组件会被移除
            child: Text('loadData',style: TextStyle(color:  Color(0xffffffff),fontSize: 14),),
            onPressed: (){
              setState(() {
                showProgressHud = true;
                loadData();
              });
            },
          ),

此时控制台输出：


截屏2020-06-28 上午3.26.36.png

我们发现首次生成的SubHomePage被移除了，并且loadData完成后生成新的SubHomePage,新的SubHomePage会接着走新的首次加载流程

child: Center(
          child: showProgressHud ?
              CircularProgressIndicator() :
              Column(
                mainAxisAlignment: MainAxisAlignment.center ,
                children: <Widget>[
                  Container(width: cw, height: 44,color: Color(0xff889eff),),
                  SubHomePage()
                ],
              )

          ,
        ),

此时我们点HomePage导航栏上的click按钮 ，增加矩形的宽度：

FlatButton( // 增加cw值,并只触发setState,showProgressHud不变,当前SubHomePage组件不会被移除
            child: Text('click',style: TextStyle(color:  Color(0xffffffff),fontSize: 14),),
            onPressed: (){
              setState(() {
                cw += 10;
              });
            },
          ),

控制台输出：


截屏2020-06-28 上午3.36.49.png

此时我们可以看到HomePage的build触发了其子组件SubHomePage的didUpdateWidget和build方法，但是SubHomePage仍然是原来的SubHomePage,并未重新释放（如果释放后重构会调用dispose和initState），只是重新build了一次。
点击SubHomePage上的increase,控制台输出:


截屏2020-06-28 上午3.42.26.png

cmd+\ 热重载，控制台输出：
截屏2020-06-28 下午12.21.37.png
二、App生命周期

app生命周期比较简单,具体可以参考官方文档

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,753评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,668评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,090评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,010评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,054评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,806评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,484评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,380评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,873评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,838评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,499评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3赞 374
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2赞 356