专栏首页flutter开发者StatefulWidget与State

StatefulWidget与State

在前面的文章中我们通过StatelessWidget介绍了Widget构建与渲染的过程,虽然StatefulWidget构建与渲染的过程与StatelessWidget基本一致,但是由于StatefulWidget是有状态的组建在更新构建过程上会有一点稍微的不同,今天我们就来看下StatefulWidget是如何更新Widget,以及它是如何触发界面变更的。

StatefulWidget

首先来看下StatefulWidget,它是一个抽象类,当然它十分的简单。它和StatelessWidget一样它只有两个方法,都有一个createElement的方法,但是和StatelessWidget不同的是,StatelessWidget可以直接通过build方法来构建Widget,但是StatefulWidget没有build方法,所以它只能使用State的build来构建Widget。

StatelessWidget源码

abstract class StatelessWidget extends Widget {  const StatelessWidget({ Key key }) : super(key: key);  @override  StatelessElement createElement() => StatelessElement(this);  @protected  Widget build(BuildContext context);}

StatefulWidget源码

 abstract class StatefulWidget extends Widget {  const StatefulWidget({ Key key }) : super(key: key);    @override  StatefulElement createElement() => StatefulElement(this);    @protected  State createState();}

Element相关的东西我们前面已经讲过,今天就不在具体看了,下面我们来看看State是什么。

State生命周期

 abstract class State<T extends StatefulWidget> with Diagnosticable {//初始化  void initState() {}//界面更新,Widget 的配置发生变化时,或热重载时,系统会回调该方法  void didUpdateWidget(covariant T oldWidget) {}//重新载入  void reassemble() {}//设置界面数据变更  void setState(VoidCallback fn) {}//视图不可见  void deactivate() {}//视图销毁  void dispose() {}  Widget build(BuildContext context){}//tate 对象的依赖关系发生变化后,Flutter 会回调该方法,随后触发组件构建。State 对象依赖关系发生变化的典型场景:系统语言 Locale 或应用主题改变时,系统会通知 State 执行 didChangeDependencies 回调方法  void didChangeDependencies() {}  void debugFillProperties(DiagnosticPropertiesBuilder properties) {}  
}

StatefulWidget的生命周期大致可分为三个阶段:

  • 初始化:插入渲染树,这一阶段涉及的生命周期函数主要有createState、initState、didChangeDependencies和build。
  • 运行中:在渲染树中存在,这一阶段涉及的生命周期函数主要有didUpdateWidget和build。
  • 销毁:从渲染树中移除,此阶段涉及的生命周期函数主要有deactivate和dispose。 具体的声明周期调用过程如下:

我们还是用一个小例子来看下今天的例子

定义两个界面,第一个界面有一个StatefulWidget我们点击列表后触发setState方法进入第二个界面,第二个界面同样是一个StatefulWidget,为了直观的观察有状态组建的生命周期,我们给State每个阶段都打了个log。如“page1 initState”

首先第一次进入第一个界面会打印

 I/flutter (26863): page1 initStateI/flutter (26863): page1 didChangeDependenciesI/flutter (26863): page1 build

当我们进入第二个界面时

I/flutter (26863): page2 initStateI/flutter (26863): page2 didChangeDependenciesI/flutter (26863): page2 build

当我们从第二个界面返回时

I/flutter (26863): page2 deactivateI/flutter (26863): page2 dispose

最后我们在第一个界面尝试下热更新

I/flutter (26863): page1 reassembleI/flutter (26863): page1 build

下面是相关生命周期的调用次数

生命周期

调用次数

调用时间

createState

1

组件创建时

initState

1

组件创建时

didChangeDependencies

>=1

组件创建或状态发生变化

build

>=1

组件创建或UI重新渲染

didUpdateWidget

>=1

组件创建或UI重新渲染

deactivate

>=1

State对象将要移除时

dispose

1

state对象被销毁

通常情况下,我们可以在initState方法中做一些初始化工作,然后在dispose方法中做一些销毁工作。

setState如何触发界面变更

在前面很多例子中我们多次使用到setState方法,来更新Element中的数据,每次当每次数据变更时我们触发setState方法,紧接着界面就跟着变化了,大家应该都知道这是setState触发了界面的刷新,但是setState到底有什么魔法可以触发界面重构与刷新呢?接下来我们就来具体看下。

在开始了解setState方法之前我们还需要来了解下一个枚举类_StateLifecycle,它是flutter中的一个私有类,用来表示State的生命周期。

 enum _StateLifecycle {  created,  initialized,  ready,  defunct,}
  • created表示State 的Create和方法已经执行,State.initState正在进行执行
  • initialized表示State.initState已经执行,State.didChangeDependencies方法正在执行
  • ready表示State已经完成构建
  • defunct表示State.dispose方法已经执行,State即将销毁

好了,了解完了State的生命周期,我们接着去看setState方法。

 void setState(VoidCallback fn) {  assert(fn != null);if (_debugLifecycleState == _StateLifecycle.defunct){  抛出异常}if (_debugLifecycleState == _StateLifecycle.created && !mounted){   抛出异常}final dynamic result = fn() as dynamic;if (result is Future){   抛出异常}   _element.markNeedsBuild(); }

首先setState方法需要传入一个类型为VoidCallback的参数,其实就是一个匿名参数而异。

typedef VoidCallback = void Function();

所以现在你对这种写法是不是就不那么陌生了?

 setState(() {  _counter++;});

setState方法的执行流程:

  1. 判断函数体是否为空,为空则不继续执行
  2. 首先判断state生命周期的状态,如果是defunct状态就会抛异常
  3. 然后判断state状态如果是created而且此时的Element不为空(mounte实际上就是表示Element的状态)
  4. 执行传入的函数体
  5. 判断函数体返回是不是一个Future,如果是就抛异常提示处理
  6. 调用Element的markNeedsBuild方法

上面的1-5步流程都非常的简单,在第6步调用markNeedsBuild方法。

 void markNeedsBuild() {  assert(_debugLifecycleState != _ElementLifecycle.defunct);  if (!_active)    return;  assert(owner != null);  assert(_debugLifecycleState == _ElementLifecycle.active);……  if (dirty)    return;  _dirty = true;  owner.scheduleBuildFor(this);}

在markNeedsBuild方法中会经过一系列的判断,来判断当前是否需要重新构建Widget。在最后标记当前_dirty为true,并且调用scheduleBuildFor来重新构建Wdiget。

而scheduleBuildFor最终会调用onBuildScheduled来通知每个Element去构建Widget。

小结

  1. StatefulWidget是由状态组建,我们可以使用setState方法来重新构建组建
  2. StatefulWidget的Wdiget是通过State的Build方法构建的
  3. setState方法将要重新构建的Element标记为duty然后通过scheduleBuildFor来重新构建Wdiget

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:Flutter开发者

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Flutter Widget] TabBar

    TabBar在客户端的表现形式是一般展示在appBar的下面,做同一级别不同类型界面的展示工作。

    flyou
  • 自定义View概述

    在前面的文章中我们学习了ExpansionPanelList的用法,使用ExpansionPanelList可以很轻松的实现可展开列表的效果,在文章的最后依然给...

    flyou
  • Flutter状态管理

    在前面的文章中我们学习了Flutter中事件传递的方法,让我们可以在数据流向简单的业务场景中使用InheritedWidget、Notification 或者 ...

    flyou
  • 12类优秀移动设备UI设计,实用好看有灵感,速度收藏

    联系人列表不仅存在于手机通讯录里,社交、问答、短视频等各种类型的应用中都包含了类似联系人的列表。如何设计出与产品调性一致的列表?让这些案例给你灵感吧!

    用户5009027
  • Flutter开发:运行项目提示flutter packages get不成功的解决方法

    今天端午节,为了欢度佳节,就算再困也得起床发一篇博文,发完继续睡,顺便祝各路粉丝端午节快乐。

    三掌柜
  • [答疑]同事认为写需求规约不如画界面直接

    潘老师,有产品经理同事坚持认为写需求规约不如画界面,觉得画界面最直接,怎么和他把道理讲清楚?

    用户6288414
  • 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

    前朝楚水
  • 【Flutter真香攻略】(二)环境搭建

    要做开发,前提肯定是先搭建好开发环境,Flutter环境搭建比较简单,直接查看官网即可,如果不想看英文的,也可以去看Flutter中文网。

    IT晴天
  • 在Android中集成Flutter的学习笔记

    Flutter可能是未来跨平台开发的又一技术框架,那么对于一个app,我们不可能完全用flutter来开发,那么就意味着我们需要在已有的Android和iOS代...

    Android技术干货分享
  • 转发 | 闲鱼公开多年 Flutter 实践经验

    flutter-boot核心解决了混合开发模式下的两个问题:flutter混合开发的工程化设计和混合栈。那flutter-boot是如何解决的呢?

    Java帮帮

扫码关注云+社区

领取腾讯云代金券