当前位置：首页 > news >正文

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

news 2025/6/24 9:12:06

theme: cyanosis

1. 前言

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

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

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

2. InheritedNotifier 组件的使用

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

lib/awesome/listenable/changenotifier02

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

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

```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 组件，这样数据就可以在子树节点中被共享：

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

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

这样，通过 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 方法。