Flutter 组件集录 | InheritedNotifier 内置状态管理组件

news2025/1/20 17:02:35

theme: cyanosis

1. 前言

在上一篇 《Flutter 知识集锦 | 监听与通知 ChangeNotifier》 中,我们介绍了 ChangeNotifier 对象通知监听者的能力。并通过一个简单的模拟下载进度案例,介绍了它的使用方式:

| 案例演示 | 监听-通知关系 | | --- | --- | | 184.gif | 未标题-1.png |

上一节通过全局变量来维护 ProgressValueNotifier 类型的 progress 对象,让它可以在代码中的任何位置被访问到。本文将介绍 InheritedNotifier 组件的使用,给可监听对象一个 归宿

image.png


2. InheritedNotifier 组件的使用

本文代码收录在 FlutterUnit 中,可在仓库中查看完整代码:

lib/awesome/listenable/changenotifier02

使用 InheritedNotifier 时需要定义一个子类,该类的功能之一是让数据在子树中共享数据。其中泛型便是上一篇中的 ProgressValueNotifier 可监听对象。

如下所示,定义 DownloadDataScope 类型,在构造中传入可监听对象和子组件,然后定义两个静态方法 ofread 获取存储的数据。获取的方式是通过上下文向上查询特定类型的组件。

```dart class DownloadDataScope extends InheritedNotifier {

const DownloadDataScope({super.key, required super.child,super.notifier});

static ProgressValueNotifier of(BuildContext context) { return context.dependOnInheritedWidgetOfExactType ()!.notifier!; }

static ProgressValueNotifier read(BuildContext context) { return context.getInheritedWidgetOfExactType ()!.notifier!; } } ```

然后在想要更新数据的上层节点,套上 DownloadDataScope 组件,这样数据就可以在子树节点中被共享:

image.png


使用时就非常方便,通过静态方法 of 根据上下文获取可监听对象即可。此时称: DetailProgressView 依赖了该可监听的通知器,那么在可监听对象发出通知时,就会自动通知该组件,触发 build 方法。
可以看到 DetailProgressView 此时可以是 StatelessWidget , 但依然会被通知,从而重新构建。这是一种非 State#setState 更新状态的方式。

image.png


另外,如果只是想访问数据,不想在可监听对象发生通知时,被触发更新。可以通过 read 静态方法,底层通过 getInheritedWidgetOfExactType 查询类型。比如这里主页面只想访问可监听对象,来更新数据,就可以只通过 read 来访问:

image.png

这样,通过 InheritedNotifier 组件,既可以实现数据的共享,又可以触发更新,通知需要根据数据变化的组件。相比于直接使用 ChangeNotifier 组件,省去了添加监听和移除监听的流程。对于需要共享的状态数据管理,是非常实用的。


3. InheritedNotifier 源码分析

InheritedNotifier 是一个抽象类,使用时需要进行派生,它本身继承自 InheritedWidget ,也就是说其持有的数据可以在子树中,通过上下文被访问。它有一个泛型,该类型需要继承自 Listenable ,其中 notifier 的类型是 T? 也就是一个可监听对象。

```dart abstract class InheritedNotifier extends InheritedWidget { const InheritedNotifier({ super.key, this.notifier, required super.child, });

final T? notifier;

@override bool updateShouldNotify(InheritedNotifier oldWidget) { return oldWidget.notifier != notifier; }

@override InheritedElement createElement() => _InheritedNotifierElement (this); } ```

InheritedNotifier 神奇的地方在于:使用了 of 获取数据的组件,在可监听对象发生通知时会触发重新构建。使用这里似乎没有什么核心代码,可以触发组件更新。我们仔细看一下,可以发现这里重写了 createElement 方法,所以说,魔法就在这里:

如下所示,在 _InheritedNotifierElement 构造时,会监听 notifier 触发 _handleUpdate。其中会将 _dirty 置为 false ,触发 markNeedsBuild 方法。了解 Flutter 框架的都知道 State#setState 本质上也就是触发了持有 Element 的 markNeedsBuild 方法。

image.png

也就是说,这里当可监听对象发生变化时,会通知 InheritedNotifier 对应的元素进行重新构建,触发 build 方法。如果 _dirty 为 true ,会触发 notifyClients 方法,通知依赖者:

image.png

dart @override void notifyClients(InheritedNotifier<T> oldWidget) { super.notifyClients(oldWidget); _dirty = false; }


这里有个前置知识,在《 Flutter 渲染机制 - 聚沙成塔》 第10章中,介绍过 InheritedElement 会维护依赖元素的映射,进行通知。凡是调用 dependOnInheritedWidgetOfExactType 的元素,都会被加入到映射中:

image.png

触发 notifyClients 时,将会通知元素映射中的元素触发 didChangeDependencies 。如下所示,此时其中是 HomeProgressView 对应的元素:

image.png

也就是说,接下来 HomeProgressView 对应的元素触发 didChangeDependencies,其中调用了 markNeedsBuild ,也就是说该元素被标脏,将在之后被重新构建。这就是 HomeProgressView 在可监听对象变化时,更新界面的根本原因。

image.png


4. InheritedNotifier 源码分析

InheritedNotifier 组件在元素的层级处理了依赖者界面的更新,既可以共享数据,又可以触发更新通知,是一种比较小巧的状态管理方式。你在官方的很多案例中,都可以看到用 InheritedNotifier 管理共享状态的案例。那么本文就到这里,谢谢观看 ~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1165557.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DBeaver 23.2.3发布,带来多项增强和修复

数据库管理工具DBeaver最新版本23.2.3已经发布。这个版本带来了一系列的增强和修复&#xff0c;提升了用户的使用体验和工作效率。 以下是DBeaver 23.2.3版本的一些亮点功能&#xff1a; 数据编辑器方面的改进&#xff1a; Excel (XLSX) 导出现在支持列自动拟合&#xff0c;…

人大金仓迁移报错ERROR: invalid byte sequence for encoding “UTF8“: 0x00

Oracle迁移人大金仓&#xff0c;报错&#xff1a; com.kingbase8.utilKSOLException: ERROR: invalid byte sequence for encoding “UTF8”: 0x00 报错信息&#xff0c;如图所示&#xff1a; 解决方案 1、设置参数&#xff0c;在kingbase.conf 最后面添加参数&#xff1a;ign…

串口通信(8)串口中断“边接收边解析数据“的通信程序

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

linux笔记总结-基本命令

参考&#xff1a; 1.Linux 和Windows比 比较 &#xff08;了解&#xff09; 1. 记住一句经典的话&#xff1a;在 Linux 世界里&#xff0c;一切皆文件 2. Linux目录结构 /lib • 系统开机所需要最基本的动态连接共享库&#xff0c;其作用类似于Windows里的DLL文件。几 乎所有…

流媒体服务实现H5实时预览视频

目录 背景方案业务实践细节注意 待办 背景 客户aws服务磁盘存储告急&#xff0c;最高可扩容16T。排查如下&#xff1a;主要是视频文件存在大量复制使用的情况。例如发布节目时复制、预览时复制&#xff0c;这样上传一份视频后最大会有四份拷贝&#xff08;预览、普通发布、互动…

PHP隐藏手机号码、银行卡号、真实姓名部分方法

1、隐藏手机号码,隐藏手机号中间部分 /*** 隐藏手机号码* param int $mobile 手机号码* param int $head 头部显示数* param int $tail 尾部显示数* param string $hide_str 隐藏字符串* return string*/ function getHiddenMobile($mobile, $head 3, $tail 4, $hide_str *…

PHP依赖注入 与 控制反转详解

依赖注入 是一种设计模式&#xff0c;用于解耦组件之间的依赖关系。 它的主要思想是通过将依赖的对象传递给调用方&#xff0c;而不是由调用方自己创建或管理依赖的对象。这种方式使得组件的依赖关系更加灵活&#xff0c;易于维护和测试。 控制反转 是一个更广泛的概念&#…

C++ 输入输出流

iostream库&#xff0c;包含两个基础类型istream(输入流)和ostream(输出流)。一个流就是一个字符序列。 流 输入输出产生的字符串称为流。 被称为流的原因&#xff1a;所有的字符都在缓冲区中&#xff0c;从缓冲区拿/放都是顺序进行的&#xff0c;字符串的消耗&#xff0c;像…

IDEA 设置代码注释模板

功能简介&#xff1a; 每次看别人代码时&#xff0c;面对毫无注释的类&#xff0c;除了头大还是头大&#xff0c; 以下提供了一种代码类注释模板 新建java类的时候&#xff0c;自动增加类注释&#xff0c;养成代码开发好习惯 效果展示&#xff1a; 代码模板&#xff1a; #if (…

《算法通关村—如何使用中序和后序来恢复一颗二叉树》

《算法通关村—如何使用中序和后序来恢复一颗二叉树》 中序&#xff1a;3 4 8 6 7 5 2 1 10 9 11 15 13 14 12 后序&#xff1a;8 7 6 5 4 3 2 10 15 14 13 12 11 9 1 通过后续遍历我们知道根节点是1&#xff0c;通过知道根节点是1&#xff0c;我们就可以从中序序列知道那些 …

不只保护隐私的防窥膜,还是屏幕的小铠甲

电脑防窥膜这种东西确实很实用&#xff0c;尤其是那些经常在公共场所用笔记本的朋友&#xff0c;更是需要这张贴膜的保护&#xff0c;不过虽然现在市面上这种防窥膜种类繁多&#xff0c;但是产品质量良莠不齐。有些防窥膜虽然有防窥效果&#xff0c;但透光率下降太多了&#xf…

【使用Python编写游戏辅助工具】第一篇:概述

引言 欢迎阅读本系列文章&#xff0c;本系列将带领读者朋友们使用Python来实现一个简单而有趣的游戏辅助工具。 写这个系列的缘由源自笔者玩了一款游戏。正巧&#xff0c;笔者对Python编程算是有一定的熟悉&#xff0c;且Python语言具备实现各种有趣功能的能力&#xff0c;因…

如何解决MySQL主从复制延时问题

MySQL 主从延时的原因是什么&#xff1f; 具体哪个环节发生延时&#xff1f; 如何解决呢&#xff1f; 对于这“三连问”&#xff0c;极少有同学能通关&#xff0c;甚至有同学连主从复制原理都不清楚。 01 什么是主从延时&#xff1f; 有时候我们遇到从数据库中获取不到信息…

Centos8安装yum源时候出现的异常问题及解决方案(保好使)

问题的出现 作者在使用centos8的时候&#xff0c;想安装tree命令&#xff0c;输入了如下的命令&#xff1a; yum install tree 但是却显示了下面的错误&#xff1a; Errors during downloading metadata for repository base: - Curl error (28): Timeout was reached for h…

MySQL第一讲·存储与字段

你好&#xff0c;我是安然无虞。 文章目录 1. 存储&#xff1a;一个完整的存储过程是怎样的&#xff1f;创建MySQL数据库确认字段创建数据表插入数据 2. 字段&#xff1a;那么多字段类型&#xff0c;该怎么定义&#xff1f;整数类型浮点数类型和定点数类型文本类型日期与时间类…

Shiny Server和ShinyProxy是什么,有什么区别?

调研以及参与过多个生物公司的生信工具研发&#xff0c;不管是ShinyServer还是ShinyProxy都有一定研究&#xff0c;尤其是ShinyServer。如果仅是本地化测试想快速的搭建Shiny应用&#xff0c;我推荐用Shiny Server&#xff0c;如果多并发用户且更好的线上管理Shiny应用&#xf…

【Unity数据交互】Json序列化你记得几分

ˊˊ &#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1…

掌握这几个技巧,才敢称为Jenkins大神!

01、Performance插件兼容性问题 自由风格项目中&#xff0c;有使用 Performance 插件收集构建产物&#xff0c;但是截至到目前最新版本&#xff08;Jenkins v2.298&#xff0c;Performance&#xff1a;v3.19&#xff09;&#xff0c;此插件和Jenkins都存在有兼容性问题&#x…

scanpy赋值问题

今天发现一个很奇怪的bug import numpy as np import pandas as pd import anndata as ad from scipy.sparse import csr_matrix print(ad.__version__)counts csr_matrix(np.random.poisson(1, size(100, 2000)), dtypenp.float32) adata1 ad.AnnData(counts) print(adata1)…

基于深度学习的视频多目标跟踪实现 计算机竞赛

文章目录 1 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的视频多目标跟踪实现 …