Flutter 中 InheritedWidget 的理解和应用

2023-11-15 07:06:17

Flutter 的 InheritedWidget 是一种强大的小部件，它允许您在小部件树中共享数据，而不必显式地传递数据。这在需要跨多个小部件层次结构访问数据的场景中非常有用。

InheritedWidget 的工作原理

InheritedWidget 充当数据源，它持有需要共享的数据。当 InheritedWidget 的子孙小部件需要访问这些数据时，它们可以调用 InheritedWidget.of() 方法来获取最近的 InheritedWidget 实例。

InheritedWidget 的用法

要使用 InheritedWidget，您需要创建两个小部件：

InheritedWidget 本身： 它持有需要共享的数据，并提供 InheritedWidget.of() 方法来访问该数据。
Consumer 小部件： 它继承自 InheritedWidget，并使用 InheritedWidget.of() 方法来访问共享数据。

以下是一个简单的示例，说明如何使用 InheritedWidget 来共享当前主题：

class ThemeProvider extends InheritedWidget {
  final ThemeData theme;

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

  static ThemeData of(BuildContext context) {
    return (context.dependOnInheritedWidgetOfExactType<ThemeProvider>())!.theme;
  }

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return ((oldWidget as ThemeProvider).theme != theme);
  }
}

class MyConsumerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context).theme;

    // 使用主题...

    return Container();
  }
}