Flutter中InheritedWidget原理及使用指南

前端

2023-12-19 21:39:18

InheritedWidget：Flutter 中跨组件共享数据的秘诀

在 Flutter 的世界中，数据的流动通常遵循自顶向下的原则，就像我们敬爱的瀑布模型一样。如果祖先组件 A 想要将数据传递给它的子孙后代 D，则数据必须依次传递给中间组件 B 和 C，这可能会变得相当繁琐。

这就是 InheritedWidget 登场的时候了！它就像一位数据搬运工，能够无缝地在组件树中传递数据，让组件轻松访问祖先组件中的信息，无需任何手动传递的麻烦。

InheritedWidget 的工作原理

InheritedWidget 是一个特殊的 Flutter 组件，它允许您将数据存储在一个中央位置，并将其共享给所有子组件。这通过在组件树中创建一个数据共享的层级结构来实现，让数据可以跨越多个组件轻松流动。

要使用 InheritedWidget，您需要：

创建一个 InheritedWidget 类： 这个类需要继承自 InheritedWidget 类，并实现 updateShouldNotify() 方法，该方法决定了当数据更改时组件是否需要重新构建。
将 InheritedWidget 添加到组件树： 使用 InheritedWidget.of() 方法将 InheritedWidget 添加到组件树中，这样子组件就可以访问数据。

InheritedWidget 的应用场景

InheritedWidget 在以下情况下非常有用：

共享跨组件的主题： 通过存储和共享一个InheritedWidget，可以轻松地在组件树中应用一致的主题，无论组件的层次结构如何。
提供本地化字符串： 通过将本地化字符串存储在 InheritedWidget 中，可以根据用户偏好轻松地调整组件的语言和文本。
管理用户设置： 使用 InheritedWidget 来存储和共享用户设置，例如首选语言、主题或其他个性化选项，可以让您在应用程序中实现定制化体验。
传递复杂数据结构： 当您需要跨组件传递复杂的数据结构时，例如对象列表或地图，InheritedWidget 可以提供一种高效且可维护的方式。

代码示例

让我们通过一个示例来演示 InheritedWidget 的用法：

class MyInheritedWidget extends InheritedWidget {
  final String data;

  const MyInheritedWidget({
    Key? key,
    required this.data,
    required Widget child,
  }) : super(key: key, child: child);

  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }

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

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context)!.data;

    return Text(data);
  }
}

在这个示例中，我们创建了一个名为 MyInheritedWidget 的 InheritedWidget，它存储了一个字符串 data。然后，我们创建一个 MyWidget，它使用 MyInheritedWidget.of() 方法从 InheritedWidget 中获取 data。

当 MyInheritedWidget 中的 data 发生更改时，它会通知 MyWidget 重新构建，从而更新文本。