返回

解构 InheritedWidget：传递状态的强大工具

前端

In Flutter 中，InheritedWidget 扮演着传递状态的至关重要角色，为我们构建复杂的 UI 层次结构提供了无限可能。让我们深入探究 InheritedWidget 的精髓，揭开其在应用程序开发中的强大功能。

什么是 InheritedWidget？

InheritedWidget 是一个基类，允许您构建自定义小部件，这些小部件能够在整个小部件树中传递状态。它允许子小部件访问其父小部件中的数据，而无需显式传递该数据。

如何使用 InheritedWidget？

要使用 InheritedWidget，您需要创建两个类：

  1. InheritedWidget 子类： 创建一个扩展 InheritedWidget 的子类。这个子类将包含您希望传递的状态数据。
  2. 构建函数： 在构造函数中，初始化您要传递的状态数据。

一个例子

考虑一个应用程序，其中您希望在整个 UI 中传递当前用户。您可以使用 InheritedWidget 创建一个名为 CurrentUserProvider 的自定义小部件，如下所示：

class CurrentUserProvider extends InheritedWidget {
  final User currentUser;

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

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

  @override
  bool updateShouldNotify(CurrentUserProvider oldWidget) =>
      currentUser != oldWidget.currentUser;
}

使用 CurrentUserProvider

要使用 CurrentUserProvider，您可以将其包裹在您希望访问 currentUser 状态的任何小部件周围：

CurrentUserProvider(
  currentUser: _currentUser,
  child: MyWidget(),
);

然后，您的 MyWidget 可以使用 InheritedWidget.of() 方法访问 currentUser：

final currentUser = CurrentUserProvider.of(context).currentUser;

SEO 优化