flutter中state详解

简介: State在说到StatefulWidget之前,先说下State。State的作用有两点:在widget构建的时候可以被同步读取;在widget的生命周期中可能会被改变。

State

在说到StatefulWidget之前,先说下State。State的作用有两点:


在widget构建的时候可以被同步读取;

在widget的生命周期中可能会被改变。

State生命周期

State的生命周期有四种状态:


created:当State对象被创建时候,State.initState方法会被调用;

initialized:当State对象被创建,但还没有准备构建时,State.didChangeDependencies在这个时候会被调用;

ready:State对象已经准备好了构建,State.dispose没有被调用的时候;

defunct:State.dispose被调用后,State对象不能够被构建。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Txxq1QXj-1612666084611)(http://whysodiao.com/images/State LifeCycle.png)]


完整生命周期如下:


创建一个State对象时,会调用StatefulWidget.createState;

和一个BuildContext相关联,可以认为被加载了(mounted);

调用initState;

调用didChangeDependencies;

经过上述步骤,State对象被完全的初始化了,调用build;

如果有需要,会调用didUpdateWidget;

如果处在开发模式,热加载会调用reassemble;

如果它的子树(subtree)包含需要被移除的State对象,会调用deactivate;

调用dispose,State对象以后都不会被构建;

当调用了dispose,State对象处于未加载(unmounted),已经被dispose的State对象没有办法被重新加载(remount)。

setState

State中比较重要的一个方法是setState,当修改状态时,widget会被更新。比方说点击CheckBox,会出现选中和非选中状态之间的切换,就是通过修改状态来达到的。


查看setState源码,在一些异常的情况下将会抛出异常:


传入的为null;

处在defunct阶段;

created阶段还没有被加载(mounted);

参数返回一个Future对象。

检查完一系列异常后,最后调用代码如下:

_element.markNeedsBuild();

markNeedsBuild内部,则是通过标记element为dirty,在下一帧的时候重建(rebuild)。可以看出setState并不是立即生效,它只是将widget进行了标记,真正的rebuild操作,则是等到下一帧的时候才会去进行。


StatefulWidget和StatelessWidget

StatefulWidget和StatelessWidget如下所示


image.png


一个StatelessWidget可以用多个不同的BuildContext构建,而一个StatefulWidget会为每个BuildContext创建一个State对象。


StatelessWidget

对于StatelessWidget,build方法会在如下三种情况下调用,


widget第一次被插入到树中;

widget的父节点更改了配置(configuration);

widget依赖的InheritedWidget改变了。

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

StatefulWidget

StatefulWidget的两个主要类别:


在initState中创建资源,在dispose中销毁,但是不依赖于InheritedWidget或者调用setState方法,这类widget基本上用在一个应用或者页面的root;

使用setState或者依赖于InheritedWidget,这种在营业生命周期中会被重建(rebuild)很多次。

class YellowBird extends StatefulWidget {
  const YellowBird({ Key key }) : super(key: key);
  @override
  _YellowBirdState createState() => new _YellowBirdState();
}
class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFFFFE306));
  }
}

ld(BuildContext context) {undefined

return new Container(color: const Color(0xFFFFE306));

}

}


相关文章
|
缓存 前端开发 Java
手写一个Flutter State Widget,来让你彻底理解State的来龙去脉
手写一个Flutter State Widget,来让你彻底理解State的来龙去脉
210 0
手写一个Flutter State Widget,来让你彻底理解State的来龙去脉
|
Dart JavaScript 安全
Flutter State Management状态管理全面分析(二)
Flutter State Management状态管理全面分析
241 0
Flutter State Management状态管理全面分析(二)
|
算法 前端开发 JavaScript
Flutter State Management状态管理全面分析(一)
Flutter State Management状态管理全面分析
553 0
Flutter State Management状态管理全面分析(一)
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
|
JavaScript 前端开发 搜索推荐
Flutter状态State管理
状态管理是声明式编程非常重要的一个概念,我们在前面介绍过Flutter是声明式编程的,也区分声明式编程和命令式编程的区别。 这里,我们就来系统的学习一下Flutter声明式编程中非常重要的状态管理
98 0
Flutter状态State管理
|
JavaScript 前端开发 搜索推荐
Day11 - Flutter - 状态State管理
Day11 - Flutter - 状态State管理
163 0
Day11 - Flutter - 状态State管理
flutter系列之:用来管理复杂状态的State详解
Flutter的基础是widget,根据是否需要跟用户进行交互,widget则可以分为StatelessWidget和StatefulWidget。StatelessWidget只能根据传入的状态进行简单的初始化widget,如果要实现跟用户交互这种复杂的功能,则需要用到StatefulWidget。 但是对于StatefulWidget本身来说,它并不存储任何状态,所有的状态都是存放在和StatefulWidget关联的State中的。
|
数据库 Android开发 iOS开发
Flutter State 的生命周期
本文主要介绍类比 Android 和 iOS,了解 Flutter State 的生命周期。 从 Android 或 iOS 转到 Flutter 开发,最让人疑惑的是 Flutter 如何处理生命周期。 onCreate() 在哪里?viewDidLoad() 呢?我应该将业务逻辑放在哪里?为什么只有一个 build 方法? 本文将解答这些疑惑。
247 0
Flutter中State深入分析理解
本文将从源码的角度讲述 State 的 四种状态 的变换时机,以及 从 State 的角度来理解 BuildContext 的使用时机
Flutter中State深入分析理解
|
16天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin