FlutterDojo设计之道—状态管理之路(四)
在Flutter中,跨Widget的数据共享,可以如下图这样表示。
当Child Widget想要跨Widget拿到其它Widget的数据时,通常就需要使用构造函数,将数据一层层传递到Child Widget,这显然不是一个好的解决方案,不仅让Widget之间有了很大的耦合,也产生很多的冗余数据。
为了解决这个问题,Flutter SDK提供了InheritedWidget这个Widget,InheritedWidget是除了StatefulWidget和StatelessWidget之外的第三个常用的Widget。当把InheritedWidget作为Widget Tree的根节点时,这个Widget Tree就具有了一些新的功能,例如,Child Widget可以根据BuildContext找到最近的指定类型的InheritedWidget,而不是通过Widget Tree的构造函数一层层进行传递,如下图所示。
InheritedWidget的使用其实非常简单,即共享数据给Child。所以它的核心点,其实就是两个。
-
需要共享的数据 -
重新updateShouldNotify的条件
通过BuildContext的dependOnInheritedWidgetOfExactType函数,就可以直接获取父Widget中的InheritedWidget。所以在InheritedWidget内部,通常会有一个of函数,用过调用BuildContext的dependOnInheritedWidgetOfExactType函数来获取对应的父InheritedWidget。
只读的InheritedWidget
InheritedWidget默认情况下都是只读的,即只能将某个数据共享给Child Widget,而不能让Child Widget对数据做更新。下面这个例子演示了一个最基本的InheritedWidget是如何共享数据的。
class InheritedWidgetReadOnlyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ReadOnlyRoot(
count: 1008,
child: ChildReadOnly(),
);
}
}
class ChildReadOnly extends StatelessWidget {
@override
Widget build(BuildContext context) {
debugPrint('build');
ReadOnlyRoot root = ReadOnlyRoot.of(context);
return Column(
children: <Widget>[
SubtitleWidget('InheritedWidget本身不具有写数据的功能,需要结合State来获取数据修改的能力'),
Text(
'show ${root.count}',
style: TextStyle(fontSize: 20),
),
],
);
}
}
// 仅支持读取属性
class ReadOnlyRoot extends InheritedWidget {
static ReadOnlyRoot of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<ReadOnlyRoot>();
final int count;
ReadOnlyRoot({
Key key,
@required this.count,
@required Widget child,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(ReadOnlyRoot oldWidget) => count != oldWidget.count;
}
给InheritedWidget增加读写功能
数据的状态通常情况下都是保存在StatefulWidget的State中的,所以,InheritedWidget必须要结合StatefulWidget才能具有修改数据的能力,因此,思路就是在InheritedWidget中持有一个StatefulWidget的State实例,同时,使用一个StatefulWidget,将原本的Child Widget之上,插入这个InheritedWidget,这样就可以借助StatefulWidget来完成数据的修改能力,通过InheritedWidget来实现数据的共享能力。
class RootContainer extends StatefulWidget {
final Widget child;
RootContainer({
Key key,
this.child,
}) : super(key: key);
@override
_RootContainerState createState() => _RootContainerState();
static _RootContainerState of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<Root>().state;
}
class _RootContainerState extends State<RootContainer> {
int count = 0;
void incrementCounter() => setState(() => count++);
@override
Widget build(BuildContext context) {
return Root(state: this, child: widget.child);
}
}
// 同时支持读取和写入
class Root extends InheritedWidget {
final _RootContainerState state;
Root({
Key key,
@required this.state,
@required Widget child,
}) : super(key: key, child: child);
// 判断是否需要更新
@override
bool updateShouldNotify(Root oldWidget) => true;
}
在这种写法中,InheritedWidget(Root)是在StatefulWidget(RootContainer)中初始化的,当使用StatefulWidget(RootContainer)的setState函数时,InheritedWidget(Root)重建了,但是其child并不会重建,因为它是widget.child,并不会因为State的重建而重建。
要注意的是,虽然这里的StatefulWidget通过setState来修改数据了,但其子Widget并不会全部重绘,因为InheritedWidget的存在,Child Widget会有选择性的进行重绘。
在这基础上,使用就比较简单了,代码如下所示。
class InheritedWidgetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RootContainer(
child: Column(
children: <Widget>[
Widget1(),
Widget2(),
Widget3(),
],
),
);
}
}
class Widget1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
debugPrint('build Widget1');
return SubtitleWidget('InheritedWidget本身不具有写数据的功能,需要结合State来获取数据修改的能力');
}
}
class Widget2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
debugPrint('build Widget2');
return Text(
'show ${RootContainer.of(context).count}',
style: TextStyle(fontSize: 20),
);
}
}
class Widget3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
debugPrint('build Widget3');
return RaisedButton(
onPressed: () {
RootContainer.of(context).incrementCounter();
},
child: Text('Add'),
);
}
}
相关代码 Flutter Dojo-Widgets-Async-InheritedWidget
在上面这个Demo中,Widget2、3分别获取和修改了InheritedWidget中的共享数据,实现了跨Widget的数据共享。
通过Log我们可以发现,初始化的时候,Widget1、2、3都执行了build,但点击的时候,只有Widget2、3重新build了,但是Widget1并不会重新build。
这是什么原因呢?
其实这就是RootContainer.of(context)导致的。
当我们执行RootContainer.of(context)这个函数的时候,实际上调用的是context.dependOnInheritedWidgetOfExactType函数,这个函数不仅仅会返回指定类型的InheritedWidget,同时也会将Context对应的Widget添加到订阅者列表中,也就是说,即使你调用这个函数,只是为了执行某个函数,并不是想刷新UI,但是系统依然认为你需要刷新,从而导致Widget2、3都会执行rebuild。而Widget1,由于没有调用过of函数,所以不会被添加到订阅者列表中,所以不会执行rebuild。
要想解决这个问题也非常简单,那就是在不需要监听的时候,使用findAncestorWidgetOfExactType即可,这个函数只会返回指定类型的Widget,而不会将监听加入订阅者列表中。
static _RootContainerState ofNoBuild(BuildContext context) => context.findAncestorWidgetOfExactType<Root>().state;
点击按钮的函数,只需要调用上面的这个函数,在点击的时候,Widget3就不会执行rebuild了。
除了这种方式以外,还有一个方式,那就是通过const关键字,将一个Widget设置为常量Widget,即不会发生改变,这个时候rebuild的时候,系统会发现const Widget并没有发生改变,就不会rebuild了,这也是为什么在Flutter中,很多不需要改变的Padding、Margin、Theme、Size等参数需要尽可能设置为const的原因,这样可以在rebuild的时候,提高效率。
在Flutter中,Theme的实现,就是采用的这种方式。
Widget Tree的遍历
前面提到了两种方式来获取Widget Tree中的InheritedWidget,dependOnInheritedWidgetOfExactType和findAncestorWidgetOfExactType,从调用结果上来看,一种是会被加入订阅者名单,一种只是单纯的查找。
下面再来继续仔细的看看这两个函数的区别。
findAncestorWidgetOfExactType
首先来看下这个函数的注释。
从中我们可以提取几个关键信息。
-
不会触发rebuild -
O(n)复杂度 -
最好在didChangeDependencies中调用
所以findAncestorWidgetOfExactType有几个比较常用的使用场景。
-
在断言中判断父Widget的使用条件 -
获取父Widget对象,调用其方法
例如在一些Widget中,可以通过Assert来判断当前是否有使用该Widget的条件,例如Hero Widget。
dependOnInheritedWidgetOfExactType
首先也来看下这个函数的注释。
-
会触发rebuild -
O(1)复杂度 -
最好在didChangeDependencies中调用
可以发现,其实他跟findAncestorWidgetOfExactType是非常类似的,主要的区别还是在于是否会rebuild,另外,dependOnInheritedWidgetOfExactType的效率很高。
项目地址 Flutter Dojo
本文分享自微信公众号 - Android群英传(android_heroes)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
程序员进阶系列:多图教你掌握JVM
提及 JVM 这个词,估计大家 都能简单说两句,但是根据身边朋友以及诸多粉丝提出的疑问, 能系统讲出来 JVM 的 却真心很少。 网上讲解 JVM 这块的文章非常多,不过鱼龙混杂,鉴于 JVM 也是最考验 Java 程序员的基础功底啦,今天静下来,一起画画图,一起梳理梳理,好好填补一下这块,争取无论走到哪里,大家在脑海中都能有行走的 JVM 内存模型图。 1 JVM 初识 在讲解 JVM 之前,先来揭秘一下 Java 程序是如何实现一次编译到处运行的? 步骤一:用文本编辑器或者 IDE,快速编写HelloWorld.java的源代码文件; 步骤二:用 Java 编译器(javac)把源代码(*.java)编译成字节码文件(*.class); 步骤三:字节码文件(.class)便可以在任何安装了 JVM 的操作系统中运行,JVM 会将字节码翻译成可以被机器执行的本地机器码。 那么重点来了,Java 是如何实现一次编译到处运行的呢?通过上图应该很清晰找到解。 解一:Java 一次编译,到处运行,跨平台的特性是通过 JVM 来实现的,通过 JVM 来屏蔽底层操作系统的差异; 解二:Java...
- 下一篇
【微服务】143:商品分类业务的实现
今天是刘小爱自学Java的第143天。 感谢你的观看,谢谢你。 学习计划安排如下: 商品分类业务的初步实现。 数据模型的分析:数据表字段的设计,Java中对应的实体类,前端页面vue组件。 业务模型的分析:请求路径是什么?根据什么去数据库查询?具体实现代码的编写。 其中还有一个跨域问题未来得及解决,怎么感觉积累的问题越来越多了,这样下去可不行啊。 一、商品分类业务 我们的项目是刘小爱商城,其核心自然是商品了,所以就要涉及到一个商品分类业务。 1需求分析 我们先看看国内的主流网站上是如何做的? 比如说家用电器,这是一级类目。 它又分为很多种:比如说电视、空调、洗衣机、冰箱……等,这是二级类目。 并且还能够垂直细分,比如说电视又可以被分为:超薄电视、全面屏电视……等。 好,如何用代码实现这种需求? 一个需求拿到手中了,优先建立数据模型。 前端页面中的这些数据如何存放到数据库中? 数据库中的表如何设计,有哪些字段? 设计Java实体类和数据表对应? 这些问题解决了,方向也就定了,剩下的就是具体代码的编写了。 所以说数据模型是非常重要的,你想呀,方向都弄错了,写再多的代码有什么用? 2数据库表...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8编译安装MySQL8.0.19
- CentOS6,CentOS7官方镜像安装Oracle11G
- 2048小游戏-低调大师作品
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Docker安装Oracle12C,快速搭建Oracle学习环境