4.Flutter小部件Widget简单生命周期

什么是生命周期呢?

客户端开发:iOS开发中我们需要知道UIViewController从创建到销毁的整个过程,Android开发中我们需要知道Activity从创建到销毁的整个过程。以便在不同的生命周期方法中完成不同的操作;

前端开发中:Vue、React开发中组件也都有自己的生命周期,在不同的生命周期中我们可以做不同的操作;

Flutter小部件的生命周期:

StatelessWidget可以由父Widget直接传入值,调用build方法来构建,整个过程非常简单;

而StatefulWidget需要通过State来管理其数据,并且还要监控状态的改变决定是否重新build整个Widget;

所以,我们主要讨论StatefulWidget的生命周期,也就是它从创建到销毁的整个过程;

1.3.2. 生命周期的简单版

在这个版本中,我讲解那些常用的方法和回调,下一个版本中我解释一些比较复杂的方法和回调

那么StatefulWidget有哪些生命周期的回调呢?它们分别在什么情况下执行呢?

在下图中,灰色部分的内容是Flutter内部操作的,我们并不需要手动去设置它们;

白色部分表示我们可以去监听到或者可以手动调用的方法;

我们知道StatefulWidget本身由两个类组成的:StatefulWidget和State,我们分开进行分析

首先,执行StatefulWidget中相关的方法:

1、执行StatefulWidget的构造函数(Constructor)来创建出StatefulWidget;

2、执行StatefulWidget的createState方法,来创建一个维护StatefulWidget的State对象;

其次,调用createState创建State对象时,执行State类的相关方法:

1、执行State类的构造方法(Constructor)来创建State对象;

2、执行initState,我们通常会在这个方法中执行一些数据初始化的操作,或者也可能会发送网络请求;

注意:这个方法是重写父类的方法,必须调用super,因为父类中会进行一些其他操作;

并且如果你阅读源码,你会发现这里有一个注解(annotation):@mustCallSuper

3、执行didChangeDependencies方法,这个方法在两种情况下会调用

情况一:调用initState会调用;

情况二:从其他对象中依赖一些数据发生改变时,比如前面我们提到的InheritedWidget(这个后面会讲到);

4、Flutter执行build方法,来看一下我们当前的Widget需要渲染哪些Widget;

5、当前的Widget不再使用时,会调用dispose进行销毁;

6、手动调用setState方法,会根据最新的状态(数据)来重新调用build方法,构建对应的Widgets;

7、执行didUpdateWidget方法是在当父Widget触发重建(rebuild)时,系统会调用didUpdateWidget方法;


StatefulWidget生命周期函数执行过程

/*

理解生命周期的函数能做什么以及意义?

1.初始化一些数据、变量、状态

2.发送网络请求

3.监听属性变化

4.进行一些事件的监听controller添加监听事件

5.管理内存:一些定时器手动进行销毁

*/

import 'package:flutter/material.dart';

main() {

runApp(MaterialApp(

home:KSJScaffold()

));

}

/*

StatelessWidget生命周期函数执行过程?

flutter: 构造函数被调用

flutter: build函数被调用

flutter: build函数被调用

*/

class KSJStatelessWidgetextends StatelessWidget {

final Stringmessage;

  KSJStatelessWidget(this.message) {

print('构造函数被调用');

  }

@override

  Widgetbuild(BuildContext context) {

print('build函数被调用');

    return Container();

  }

}

/*

performing hot restart...

Syncing files to device iPhone X...

Restarted application in 2,941ms.

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: 2.KSJApp的createState被调用

flutter: 3.KSJApp的_KSJAppState被调用

flutter: 4.KSJApp的initState被调用

flutter: 父节点build被调用=>didChangeDependencies

flutter: 5.KSJApp的build被调用

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: KSJ的didUpdateWidget

flutter: 5.KSJApp的build被调用

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: KSJ的didUpdateWidget

flutter: 5.KSJApp的build被调用

*/

class KSJScaffoldextends StatefulWidget {

@override

  _KSJScaffoldStatecreateState() =>_KSJScaffoldState();

}

class _KSJScaffoldStateextends State {

num_count =0;

  @override

  Widgetbuild(BuildContext context) {

print("开始:父节点发生改变或新建");

    return  Scaffold(

appBar:AppBar(title:Text('KSJ')),

        body:Column(

children: [

KSJApp("ksj"),

            RaisedButton(child:Text('+'), onPressed: (){

setState(() {

_count++;

              });

            }),

            Text('${this._count}')

],

        )

);

  }

}

class KSJAppextends StatefulWidget {

final Stringmessage;

  KSJApp(this.message) {

print('1.KSJApp的构造函数被调用');

  }

@override

  _KSJAppStatecreateState() {

print('2.KSJApp的createState被调用');

    return _KSJAppState();

  }

}

class _KSJAppStateextends State {

num_counter =0;

  _KSJAppState(){

print('3.KSJApp的_KSJAppState被调用');

  }

@override

  void initState() {

// TODO: implement initState

    //  @mustCallSuper

    super.initState();

    print('4.KSJApp的initState被调用');

  }

// 数据改变依赖的时候会发生改变并调用

// 情况1:调用 initState会调用

// 情况2:从其他对象中依赖一些数据发生改变时,比如前面我们提到的inheritedWidget(这个后面会讲到)

  @override

  void didChangeDependencies() {

// TODO: implement didChangeDependencies

    super.didChangeDependencies();

    print('didChangeDependencies');

  }

@override

  void didUpdateWidget(KSJApp oldWidget) {

// TODO: implement didUpdateWidget

    super.didUpdateWidget(oldWidget);

    print('KSJ的didUpdateWidget');

  }

@override

  Widgetbuild(BuildContext context) {

print('5.KSJApp的build被调用');

    return Center(

child:Column(

children: [

Text('$_counter'),

          RaisedButton(child:Text("增加"), onPressed: (){

// set方法的调用会触发build的方法的使用

            print('set方法的调用会触发build的方法的调用');

            setState(() {

_counter++;

            });

          })

],

      ),

    );

  }

@override

  void dispose() {

// TODO: implement dispose

    print('6.KSJApp的dispose被调用');

    super.dispose();

  }

}



复制备份用:

/*

理解生命周期的函数能做什么以及意义?

1.初始化一些数据、变量、状态

2.发送网络请求

3.监听属性变化

4.进行一些事件的监听controller添加监听事件

5.管理内存:一些定时器手动进行销毁

*/

import 'package:flutter/material.dart';

main() {

runApp(MaterialApp(

home:KSJScaffold()

));

}

/*

StatelessWidget生命周期函数执行过程?

flutter: 构造函数被调用

flutter: build函数被调用

flutter: build函数被调用

*/

class KSJStatelessWidgetextends StatelessWidget {

final Stringmessage;

  KSJStatelessWidget(this.message) {

print('构造函数被调用');

  }

@override

  Widgetbuild(BuildContext context) {

print('build函数被调用');

    return Container();

  }

}

/*

performing hot restart...

Syncing files to device iPhone X...

Restarted application in 2,941ms.

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: 2.KSJApp的createState被调用

flutter: 3.KSJApp的_KSJAppState被调用

flutter: 4.KSJApp的initState被调用

flutter: 父节点build被调用=>didChangeDependencies

flutter: 5.KSJApp的build被调用

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: KSJ的didUpdateWidget

flutter: 5.KSJApp的build被调用

flutter: 开始:父节点发生改变或新建

flutter: 1.KSJApp的构造函数被调用

flutter: KSJ的didUpdateWidget

flutter: 5.KSJApp的build被调用

*/

class KSJScaffoldextends StatefulWidget {

@override

  _KSJScaffoldStatecreateState() =>_KSJScaffoldState();

}

class _KSJScaffoldStateextends State {

num_count =0;

  @override

  Widgetbuild(BuildContext context) {

print("开始:父节点发生改变或新建");

    return  Scaffold(

appBar:AppBar(title:Text('KSJ')),

        body:Column(

children: [

KSJApp("ksj"),

            RaisedButton(child:Text('+'), onPressed: (){

setState(() {

_count++;

              });

            }),

            Text('${this._count}')

],

        )

);

  }

}

class KSJAppextends StatefulWidget {

final Stringmessage;

  KSJApp(this.message) {

print('1.KSJApp的构造函数被调用');

  }

@override

  _KSJAppStatecreateState() {

print('2.KSJApp的createState被调用');

    return _KSJAppState();

  }

}

class _KSJAppStateextends State {

num_counter =0;

  _KSJAppState(){

print('3.KSJApp的_KSJAppState被调用');

  }

@override

  void initState() {

// TODO: implement initState

    //  @mustCallSuper

    super.initState();

    print('4.KSJApp的initState被调用');

  }

// 数据改变依赖的时候会发生改变并调用

// 情况1:调用 initState会调用

// 情况2:从其他对象中依赖一些数据发生改变时,比如前面我们提到的inheritedWidget(这个后面会讲到)

  @override

  void didChangeDependencies() {

// TODO: implement didChangeDependencies

    super.didChangeDependencies();

    print('didChangeDependencies');

  }

@override

  void didUpdateWidget(KSJApp oldWidget) {

// TODO: implement didUpdateWidget

    super.didUpdateWidget(oldWidget);

    print('KSJ的didUpdateWidget');

  }

@override

  Widgetbuild(BuildContext context) {

print('5.KSJApp的build被调用');

    return Center(

child:Column(

children: [

Text('$_counter'),

          RaisedButton(child:Text("增加"), onPressed: (){

// set方法的调用会触发build的方法的使用

            print('set方法的调用会触发build的方法的调用');

            setState(() {

_counter++;

            });

          })

],

      ),

    );

  }

@override

  void dispose() {

// TODO: implement dispose

    print('6.KSJApp的dispose被调用');

    super.dispose();

  }

}


复杂结构图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342