Flutter中默认提供的InheritedWidget有哪些？求最佳示例

一、Flutter 内置的 InheritedWidget 列表 #

Flutter 框架内部提供了不少开箱即用的 InheritedWidget，用于在组件树中共享通用状态或配置，常见的包括：

• MediaQuery：获取设备屏幕尺寸、方向、像素密度等媒体相关信息
• Theme：共享应用全局主题样式（如颜色方案、字体、按钮样式等）
• Localizations：处理多语言本地化，提供当前语言环境下的文本资源
• Navigator：内部基于 InheritedWidget 实现路由导航状态的传递，让子组件能访问导航栈
• DefaultTextStyle：为子树中的文本组件提供默认样式，避免重复设置
• Directionality：控制文本布局方向（从左到右 LTR / 从右到左 RTL），适配不同语言习惯
• FocusScope：管理焦点状态的继承传递，帮助组件处理焦点获取与切换
• PrimaryScrollController：为子树中的滚动视图关联默认的滚动控制器，方便统一控制滚动行为

二、InheritedWidget 最佳实践示例 #

下面是一个实用的全局用户状态管理示例，展示了如何利用 InheritedWidget 实现跨组件的状态共享与自动更新：

1. 定义可复用的用户状态类 #

首先创建一个保存用户信息的 immutable 类，通过 copyWith 方法实现状态的安全更新：

class UserInfo {
  final String name;
  final int age;

  UserInfo(this.name, this.age);

  // 生成新状态对象，避免直接修改原实例
  UserInfo copyWith({String? name, int? age}) {
    return UserInfo(
      name ?? this.name,
      age ?? this.age,
    );
  }
}

2. 实现自定义 InheritedWidget 子类 #

创建 UserProvider 作为状态的容器，同时提供更新状态的回调，并通过 updateShouldNotify 控制更新时机：

class UserProvider extends InheritedWidget {
  final UserInfo userInfo;
  final Function(UserInfo) updateUser; // 用于外部更新状态的回调

  const UserProvider({
    super.key,
    required this.userInfo,
    required this.updateUser,
    required super.child,
  });

  // 静态方法简化子组件获取实例的操作
  static UserProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserProvider>();
  }

  // 当状态变化时，判断是否需要通知依赖的子组件重建
  @override
  bool updateShouldNotify(UserProvider oldWidget) {
    return userInfo.name != oldWidget.userInfo.name ||
        userInfo.age != oldWidget.userInfo.age;
  }
}

3. 在父组件中注入状态 #

在应用的根组件（或需要共享状态的父组件）中，通过 UserProvider 包裹子树，并维护状态的更新：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late UserInfo _currentUser;

  @override
  void initState() {
    super.initState();
    _currentUser = UserInfo("张三", 25);
  }

  void _updateUserInfo() {
    setState(() {
      _currentUser = _currentUser.copyWith(name: "李四", age: 26);
    });
  }

  @override
  Widget build(BuildContext context) {
    return UserProvider(
      userInfo: _currentUser,
      updateUser: (newUser) => setState(() => _currentUser = newUser),
      child: Scaffold(
        appBar: AppBar(title: const Text("InheritedWidget 状态共享示例")),
        body: const Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            UserNameDisplay(),
            SizedBox(height: 20),
            UserAgeDisplay(),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _updateUserInfo,
          child: const Icon(Icons.refresh),
        ),
      ),
    );
  }
}

4. 子组件中获取并使用状态 #

子组件无需通过构造函数传递状态，直接通过 BuildContext 从 UserProvider 中获取最新状态：

class UserNameDisplay extends StatelessWidget {
  const UserNameDisplay({super.key});

  @override
  Widget build(BuildContext context) {
    final userProvider = UserProvider.of(context);
    return Text(
      "用户名: ${userProvider?.userInfo.name}",
      style: const TextStyle(fontSize: 20),
    );
  }
}

class UserAgeDisplay extends StatelessWidget {
  const UserAgeDisplay({super.key});

  @override
  Widget build(BuildContext context) {
    final userProvider = UserProvider.of(context);
    return Text(
      "年龄: ${userProvider?.userInfo.age}",
      style: const TextStyle(fontSize: 20),
    );
  }
}

示例优势说明 #

• 解耦组件：子组件无需依赖父组件的状态传递，通过 BuildContext 即可获取所需状态，降低组件间耦合度
• 自动更新：当状态变化时，所有依赖该状态的子组件会自动重建，保证 UI 与状态同步
• 性能优化：通过 updateShouldNotify 精确判断是否需要更新，避免不必要的组件重建，提升性能

内容的提问来源于stack exchange，提问作者NøBi Mac