(六)flutter入门之widget解惑

首先在介绍flutter之前,我们需要了解一个概念,在dart中的理念是一切皆为对象,而在flutter上,我们的理念是一切皆widget(可以理解为组件),flutter就是谷歌封装的完善的基于MD风格以及ios的Cupertino风格的基于dart语言的一套ui组件框架,由于dart作为谷歌新系统的官方指定语言,并且为ios和安卓统一了开发风格,所以我们可以用flutter开发出跨平台的app,现在我们从widget开始介绍flutter的组件

widget组件

在flutter中存在两种widget,一种是存在状态改变的StatefulWidget 和无状态改变的StatelessWidget ,这里的状态是否需要改变对应着我们开发的过程中这个组件是否需要进行动态的ui更改操作,如果说我们需要更改ui,这时候就需要继承StatefulWidget 组件了,否则页面就是个静态的ui无法进行更改,当然在开发的过程中,如果确定当前页面是静态的,推荐继承StatelessWidget 组件,因为对于flutter而言,静态的页面渲染的速度比动态的组件要快一些,并且由于是静态ui,渲染一次以后就不会进行更改重新渲染,所以资源的消耗也会更小一些(当然,如果怕出意外或者频繁改动,所有的组件都继承StatefulWidget 开发,也是可以的,只是博主不推荐),现在我们创建一下这两个不同的widget,看看到底有什么不同

StatelessWidget :

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
    );
  }
}

StatefulWidget :

class MyfulWidget extends StatefulWidget {
  @override
  _MyfulWidgetState createState() => _MyfulWidgetState();
}

class _MyfulWidgetState extends State<MyfulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
    );
  }
}

从上面可以看出来,两个widget都有build方法,这个build方法就是组件加载ui的方法,我们需要如何布局,组合出当前的组件就需要在build方法中开发,唯一的区别就是build所在的类不同,StatelessWidget 的build方法就在自己的类中,因为当前的组件是静态组件,只要加载渲染一次即可,所以默认指定了ui布局,就不需要其他操作了,但是StatefulWidget 的build是在createState的方法中创建的state子类中,这个state是flutter的概念,基本上所有的动态的组件,谷歌的sdk中默认都会指定对应的State,而所有的ui加载也好,数据变动也好都在这个子类中操作,那么我们的ui需要变动怎么办呢?这个时候就需要一个方法手动触发更改,刷新widget的生命周期(有React开发经验的应该会发现这点flutter和React很相似,React也是靠绑定组件的状态,修改状态来刷新ui的,所以有经验的童鞋,可以按照React和原生安卓开发的经验来理解flutter的生命周期,会事半功倍),所以接下来我们学习一下widget的生命周期

1768723716-5b188ca549250_articlex.png

从上面可以看出来widget的生命周期大概分为三个阶段

  • 初始化(插入渲染树)

  • 状态改变(在渲染树中存在)

  • 销毁(从渲染树种移除)

初始化阶段

构造函数
构造函数属于每个类的入口,肯定是widget的第一个方法,一般我们都认
为构造函数不属于生命周期的方法,只认为是触发生命周期的入口方法
initState
这个方法是widget的初始化方法,我们可以理解为原生安卓开发的时候Activity的onCreate生命周期,这
个方法在组件创建的时候只会触发一次,我们可以在这个方法中调用一些参数的初始化操作,以及控制器的
一些监听等,和我们原生开发的习惯一样,可以在这个方法中默认initEvent()方法等其他操作,但是不建
议在这里做耗时操作,否则会影响到组件的加载创建,甚至可能导致崩溃
didChangeDependencies
这个函数会紧接着在init函数之后调用,并且可以调用并且可以调用BuildContext.inheritFromWidgetOfExactType,
可能很多人会疑惑这BuildContext.inheritFromWidgetOfExactType有什么作用或者说具体的场景是什么呢?
我们举一个例子:假设我们有一个需求,页面上需要tab切换操作,tab一般需要自定义一个TabController,
但是tab有两种用法,还可以选择使用默认的DefaultTabController处理,这样的话就不需要自定义控制器了,
在默认的控制器中就用到了BuildContext.inheritFromWidgetOfExactType,我们大概看下源码:
void didChangeDependencies() {
    super.didChangeDependencies();
    _updateTabController();//从这里调用了BuildContext.inheritFromWidgetOfExactType
    _initIndicatorPainter();
  }

接着我们看看_updateTabController方法:

void _updateTabController() {
    final TabController newController = widget.controller ?? DefaultTabController.of(context);//这里涉及了一个of传递上下文的操作
    ...
    }

接下来我们看看这个传递上下文的方法

static TabController of(BuildContext context) {
    final _TabControllerScope scope = context.inheritFromWidgetOfExactType(_TabControllerScope);//就是这里触发了BuildContext.inheritFromWidgetOfExactType
    return scope?.controller;
  }

看到了大概的源码实现,我们大概了解了这个didChangeDependencies生命周期的作用,但是有人会疑惑,BuildContext.inheritFromWidgetOfExactType到底有什么作用呢?这里我的看法是,可以传递context使得组件之间可以跨组件获取数据等操作(如果理解有误或者有不同的看法,欢迎大佬指正)

build
这个生命周期我们一开始也介绍了,用来挂载组件进行最终ui布局渲染使用的,但是由于我们可能存在ui
修改的情况,也就是说,这个函数不是只触发一次的(是否触发一次,是看是不是有state决定的,不是当前
生命周期决定)

状态改变阶段

didUpdateWidget
该生命周期一般是我们组件出现了状态改变的时候,就会触发当前函数,在当前函数中,flutter会创建出来
新的widget,然后和旧的状态下的widget进行比较,看看有什么属性不一样,有什么进行了改变,然后重新
绑定,这个函数有个比较坑的点,比如我们改动了以后,可能监听的函数改变了,或者控制器变更了,我们
必须要在当前方法进行移除旧的控制器和监听事件,然后重新绑定新的,否则会影响组件运行,我们通过上
面的生命周期图可以看出来,当前函数调用完毕以后,就会再次调用build方法,也就是重新创建组件布局,
所以我们也可以确定每次我们修改完状态后,flutter是重新创建widget出来

组件销毁阶段

deactivate
这个是在销毁之前调用的生命周期,目前具体的作用博主也没使用过,不过经过测试,当前函数是在组件
还处于可见状态下调用的,在dispose之前调用
dispose
组件调用到当前函数的时候,就会触发真的移除组件,销毁对象,移除控制器,取消监听事件等操作,
不过执行当前函数代表正在销毁,可以理解为还没销毁完毕,当前函数执行完毕以后就是真的销毁调用完毕

好了,经过上面的生命周期讲解,可能大概知道了widget的生命周期以及大概的作用,那么肯定有人会问,widget怎么触发状态改变呢?在widget中存在setState函数,在这个函数内部可以编写我们需要改变的时候触发的业务代码,当此方法调用的时候,就代表着当前的组件需要进行状态更改了,即会触发组件状态改变阶段生命周期流程,但是这里我们需要注意的一点是,在flutter中,状态改变的可能存在如下两种

1.当前组件内部调用setState方法
2.当前组件的父组件调用了setState方法,当前的组件也会调用状态改变重新渲染的流程,孩子组件调用
状态改变的方法并不会触发父组件的状态改变的方法(据说新的sdk可能会改动,博主目前没测试出来)

其他特殊情况

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

推荐阅读更多精彩内容

  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 4,501评论 0 1
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 4,338评论 1 17
  • 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局。...
    Q吹个大气球Q阅读 9,714评论 6 51
  • iphoneX由于带有各种传感器,不得不搞了个刘海屏,各个国产手机也跟了一波风,手机传感器塞的很爽,但苦逼的开发者...
    战斗力五只鹅阅读 13,669评论 1 3
  • 细水长流的岁月里 拥有守护。
    JingG阅读 101评论 0 1