InheritedWidget — 什么是它，树中数据传递及其工作原理

Flutter 中的 InheritedWidget 是什么？

InheritedWidget 是一个将其数据提供给 Widget Tree 中所有后代访问的 widget。与仅通过构造函数向子元素传递数据的普通 widget 不同，InheritedWidget 允许子树中的任何 widget 在没有参数链的情况下访问数据。这解决了 "prop drilling" 问题——通过多个本身不使用这些数据的中间 widget 传递数据。

内置 InheritedWidget

Flutter 包含多个内置的 InheritedWidget：Theme（配色方案和样式）、MediaQuery（屏幕大小、方向、像素密度）、Localizations（本地化字符串）、Directionality（文本方向）、DefaultTextStyle（默认文本样式）。这些 widget 由 MaterialApp 等根 widget 设置，并在整个应用程序中可用。

InheritedWidget 的生命周期

InheritedWidget 没有自己的状态——它存储通过构造函数传递的数据。当 InheritedWidget 的父级用新数据重建时，会调用 updateShouldNotify 方法来比较新旧数据。如果该方法返回 true，则所有依赖的 widget 都会被标记为需要重建。这是一种简单但有效的响应式更新机制。

通过 InheritedWidget 传递数据的工作原理

数据传递机制 通过 InheritedWidget 基于 Element Tree。当 widget 调用 dependOnInheritedWidgetOfExactType 时，相应的元素会注册对 InheritedElement 的依赖。当 InheritedWidget 发生变化时，InheritedElement 通知所有依赖的元素，这些元素将在下一帧重建。

注册依赖

dependOnInheritedWidgetOfExactType 方法不仅在树中查找 InheritedWidget——它还将当前元素订阅到通知。如果您使用 findAncestorWidgetOfExactType 而不是 dependOn，widget 将接收数据但不会在其变化时重建。这是一个重要的区别：dependOn 是订阅，findAncestor 是一次性查找。

遍历 InheritedWidget 树

当 widget 请求 InheritedWidget 时，Flutter 沿着 Element Tree 从当前元素向上到根，检查每个 InheritedElement 的类型匹配。返回第一个找到的 InheritedElement。这意味着树中最近的 InheritedWidget 具有优先级——您可以通过将 InheritedWidget 放置在更靠近后代的位置来覆盖特定级别的数据。

class ThemeData {
  final Color primaryColor;
  final TextTheme textTheme;

  const ThemeData({required this.primaryColor, required this.textTheme});
}

class MyTheme extends InheritedWidget {
  final ThemeData data;

  const MyTheme({required this.data, required Widget child}) : super(child: child);

  static MyTheme of(BuildContext context) {
    final widget = context.dependOnInheritedWidgetOfExactType<MyTheme>();
    assert(widget != null, "MyTheme not found in tree");
    return widget!;
  }

  @override
  bool updateShouldNotify(MyTheme oldWidget) => oldWidget.data != data;
}

在此示例中，MyTheme 使用静态方法 of 向后代提供数据。dependOnInheritedWidgetOfExactType 方法注册依赖，updateShouldNotify 比较新旧数据以确定是否需要重建依赖的 widget。

创建自定义 InheritedWidget

创建自定义 InheritedWidget 包括两个步骤：定义继承 InheritedWidget 的类，以及实现静态方法 of 以从后代访问。数据通过构造函数传递，updateShouldNotify 方法确定依赖的 widget 何时应重建。

步骤 1：定义 InheritedWidget 类

该类必须继承 InheritedWidget，并通过带有必需参数 child 的构造函数接收数据。数据可以是任何类型：基本类型、对象、函数。主要规则——数据必须是不可变的（immutable），以便可靠地比较旧值和新值。

步骤 2：静态方法 of

静态方法 of 接收 BuildContext 并返回 InheritedWidget 的数据。内部调用 dependOnInheritedWidgetOfExactType，它在树中查找指定类型的最接近的 InheritedWidget。如果未找到 InheritedWidget，该方法根据实现抛出异常或返回默认值。

步骤 3：在 widget 中使用

为了访问数据，widget 在 build 方法内部调用 MyWidget.of(context)。Flutter 自动将 widget 订阅到更新。如果数据发生变化，widget 将在下一帧重建。这允许创建干净、声明式的代码，无需不必要的参数。

class UserPreferences extends InheritedWidget {
  final String languageCode;
  final bool darkMode;

  const UserPreferences({
    required this.languageCode,
    required this.darkMode,
    required Widget child,
  }) : super(child: child);

  static UserPreferences of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserPreferences>()!;
  }

  @override
  bool updateShouldNotify(UserPreferences oldWidget) =>
    oldWidget.languageCode != languageCode || oldWidget.darkMode != darkMode;
}

在此示例中，UserPreferences 存储用户偏好设置。updateShouldNotify 方法分别比较每个字段，从而在仅更改一个参数时防止不必要的重建。对于具有多个字段的自定义 InheritedWidget，请使用类似的方法。

updateShouldNotify 方法与防止不必要的重建

updateShouldNotify 是 InheritedWidget 的关键方法，它确定是否需要通知依赖的 widget 有关数据更改。如果该方法返回 false，则依赖的 widget 不会重建，即使 InheritedWidget 本身收到了具有相同数据的新实例。这对性能至关重要。

updateShouldNotify 的正确实现

只比较实际发生变化并影响显示的字段。如果 InheritedWidget 包含 10 个字段，但只有一个影响 UI，则只检查该字段。对于集合，使用深度比较或不可变数据结构。不要对 List 或 Map 使用 ==，因为它们是通过引用进行比较的。

• 基本类型 — 使用直接比较：oldWidget.value != value。
• 不可变对象 — 使用重写的 ==：oldWidget.data != data（如果 data 重写了 ==）。
• 集合 — 使用 package:flutter/foundation.dart 中的 listEquals、mapEquals。

updateShouldNotify 实现中的错误

最常见的错误——返回 true 而不进行比较。这会导致在每次父级更新时重建所有依赖的 widget，即使数据没有变化。第二个错误——在数据发生变化时返回 false，导致 UI 过时。第三个——在每个帧执行的复杂比较，这会降低性能。

InheritedWidget 与回调：如何选择？

InheritedWidget 和回调（通过构造函数传递函数）解决不同的任务。InheritedWidget 适用于树中不同级别的许多 widget 需要的数据。回调适用于从父级向特定子级或反之的单向事件传递。选择取决于应用程序的架构和更改频率。

何时使用 InheritedWidget

当数据在嵌套的不同级别被许多 widget需要时，使用 InheritedWidget：应用程序主题、用户偏好设置、设备信息、当前会话数据。InheritedWidget 对于很少更改但在 UI 的不同部分需要的"全局"数据特别有效。

何时使用回调

回调适用于将事件从子 widget 传递到父 widget：按钮点击、列表项选择、表单提交。回调明确指示子级可以执行哪些操作，并且不会创建隐藏的依赖关系。对于在少量级别上向下传递数据，使用构造函数参数也更简单。

InheritedWidget 与状态管理库

Provider 和 Riverpod 是基于 InheritedWidget 构建的 Flutter 中流行的状态管理库。它们扩展了其功能：添加 ChangeNotifier 支持、拆卸时自动移除、惰性初始化和通过泛型简化的语法。

基于 InheritedWidget 的 Provider

Provider 使用 InheritedWidget 将任何类型的对象向下传递到树中。ChangeNotifierProvider 通过 ChangeNotifier 跟踪更改，并在调用 notifyListeners 时调用 updateShouldNotify。这使开发人员免于手动创建 InheritedWidget 和实现 updateShouldNotify。

与直接 InheritedWidget 的比较

直接 InheritedWidget 提供更多控制，不需要外部依赖。Provider 提供现成的基础设施：Consumer、Selector、MultiProvider、ProxyProvider。选择取决于应用程序的复杂性。对于简单的项目，直接 InheritedWidget 就足够了；对于大型项目，Provider 或 Riverpod 减少了样板代码。

// 直接 InheritedWidget
class UserProvider extends InheritedWidget {
  final UserData userData;
  const UserProvider({required this.userData, required Widget child}) : super(child: child);
  static UserData of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<UserProvider>()!.userData;
  @override
  bool updateShouldNotify(UserProvider old) => old.userData != userData;
}

// Provider 等效
return ChangeNotifierProvider<UserData>(
  create: (_) => UserData(),
  child: MyApp(),
);

示例中的两种方法解决了相同的任务——将 UserData 向下传递到树中。Provider 减少了代码量，但隐藏了 InheritedWidget 的机制。直接 InheritedWidget 提供完全控制和对正在发生的事情的理解，这在学习 Flutter 和调试复杂的重建问题时尤其重要。