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

1. 前言

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

案例演示 监听-通知关系

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


2. InheritedNotifier 组件的使用

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

lib/awesome/listenable/change_notifier_02

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

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

dart 复制代码
class DownloadDataScope extends InheritedNotifier<ProgressValueNotifier>{

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

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

  static ProgressValueNotifier read(BuildContext context) {
    return context.getInheritedWidgetOfExactType<DownloadDataScope>()!.notifier!;
  }
}

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


使用时就非常方便,通过静态方法 of 根据上下文获取可监听对象即可。此时称: DetailProgressView 依赖了该可监听的通知器,那么在可监听对象发出通知时,就会自动通知该组件,触发 build 方法。

可以看到 DetailProgressView 此时可以是 StatelessWidget , 但依然会被通知,从而重新构建。这是一种非 State#setState 更新状态的方式。


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

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


3. InheritedNotifier 源码分析

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

dart 复制代码
abstract class InheritedNotifier<T extends Listenable> extends InheritedWidget {
  const InheritedNotifier({
    super.key,
    this.notifier,
    required super.child,
  });

  final T? notifier;

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

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

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

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

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

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

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

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

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


4. InheritedNotifier 源码分析

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

相关推荐
kymjs张涛6 小时前
OpenClaw 学习小组:初识
android·linux·人工智能
范特西林9 小时前
实战演练——从零实现一个高性能 Binder 服务
android
TT_Close9 小时前
🐟 发布中心进度同步:8 个商店的上传功能开发完毕,正抓紧测试
flutter·npm·visual studio code
范特西林10 小时前
代码的生成:AIDL 编译器与 Parcel 的序列化艺术
android
范特西林10 小时前
深入内核:Binder 驱动的内存管理与事务调度
android
RaidenLiu10 小时前
Flutter Platform Channel 底层架构解析 —— 从 BinaryMessenger 到跨平台消息通信机制
前端·flutter·前端框架
范特西林11 小时前
解剖麻雀:Binder 通信的整体架构全景图
android
范特西林11 小时前
破冰之旅:为什么 Android 选择了 Binder?
android
奔跑中的蜗牛66612 小时前
一次播放器架构升级:Android 直播间 ANR 下降 60%
android
测试工坊14 小时前
Android 视频播放卡顿检测——帧率之外的第二战场
android