深入理解flutter中的state

flutter中如果使用widget, 那么无可避免的就要接触到StatelessWidget和StatefulWidget这两样东西, 这两样东西表示什么呢?

首先我们需要明白flutter中的编程范式, flutter的视图开发是声明式的, 它的核心设计思想是将视图和数据进行分离,

如果说widget表示的是视图组件的话, 那么state就是视图组件的数据, 如果一个组件是stateless, 那就表示这个widget是静态的, 也就是你所要构建用户界面不随状态信息的变化而变化。 如果一个组件是stateful, 那就表示它会随着状态信息而改变。

statelessWidget

statelesswidget在flutter中的大体形式是这样的:

class --- extends StatelessWidget {
Widget build(BuildContext context) {
return ----
}
}

下面是Text这个widget的部分源码:

class Text extends StatelessWidget {
//构造函数
const Text(this.data, {
Key key,
this.textAligin,
this.textDirction,
}) : assert(data != null),
textSpan = null,
super(key: key);
//一些属性
final String data;
final textAlign textAligin;
final textDirction textDirction;
@override
Widget build(BuildContext contxet) {
...
Widget result = RichText(
);
return result;
}
}

可以看到, 在构造方法将其属性列表赋值后, build方法随即讲子组件RichText通过其属性列表(如文本data, 对齐方式textAlign, 文本展示方向textDirction)初始化后返回, 之后Text内部不再响应外部数据的变化。

简单的判断规则: 父widget是否能通过初始化参数完全控制其UI展示效果?, 如果能我们就可以使用statelessWidget来设计构造函数接口了

第一个例子就是, 我需要创建一个自定义的弹窗控件

statefulwidget

statefulwidget的常见形式是这样的:

class --- extends StatefulWidget {
--- createState() => ----();
}
class --- extends State<---> with xxx {
Widget build(BuildContext context)
}

下面以Image这个组件源码来看看:

class Image extends StatefulWidget {
const Image({
Key? key,
@required this.image,
//其它参数
}) : assert(image != null),
super(key: key);
final ImageProvider image;
//其它属性
@override
_ImageState createState() => _ImageState();
}
class _ImageState extends State<Image> {
ImageInfo _ImageInfo;
//其它属性
...
void _handleImageChanged(ImageInfo imageInfo, bool synchronousCall) {
setState((){
_imageInfo = imageInfo;
});
}
@override
Widget build(BuildContext context) {
final RawImage image = RawImage(
image: _imageInfo?.image,
//其它的初始化配置
);
return image;
}
...
}

Image类的构造函数会接收要被这个类使用的属性参数, 然而不同的是, image类并没有build方法来创建视图, 而是通过
createState方法创建了一个类型为_ImageState的state对象, 然后由这个对象负责视图的构建

这个state对象持有并处理了Image类中的状态变化。所以我就以_imageInfo属性为例子来展开说明。

_imageInfo属性用来给Widget加载真实的图片, 一旦State对象通过_handleImageChange方法监听到_imageInfo属性发生了变化, 就会立即调用_imageState类的setState()方法通知Flutter框架: 数据发生变化, 请使用更新后_imageInfo
数据重新加载图片, 而Flutter框架则会标记视图状态, 更新UI。

慎用statefulWidget

widget是不可变的, 更新就意味着销毁加重建(build), statelessWidget是静态的, 一旦创建则无需更新, 而对于statefulWidget来说, 在State类中调用setState方法更新数据, 会触发视图的销毁和重建, 也将间接地触发其每个子
Widget的销毁和重建, 这样就会损失效率。

posted @   wangturing  阅读(183)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示