Flutter InheritedWidget 详解

📌 什么是 InheritedWidget

• InheritedWidget 是 Flutter 数据向下传递 的机制。
• 它允许你把 数据存储在 Widget 树的某个节点，树下的子组件可以直接获取这些数据，而不需要层层参数传递。
• Flutter 的 Provider、Bloc、Theme.of、MediaQuery.of 都是基于 InheritedWidget 实现的。

📖 继承关系

Object
  ↳ Diagnosticable
    ↳ DiagnosticableTree
      ↳ Widget
        ↳ ProxyWidget
          ↳ InheritedWidget

🛠 使用方式

1. 定义一个 InheritedWidget

class CounterInheritedWidget extends InheritedWidget {
  final int counter;

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

  // 提供一个静态方法，方便子树获取数据
  static CounterInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>();
  }

  // 当 counter 改变时，是否通知子 Widget 重新 build
  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

2. 在 Widget 树中使用

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterInheritedWidget(
      counter: _counter,
      child: Scaffold(
        appBar: AppBar(title: Text("InheritedWidget Demo")),
        body: Center(child: CounterText()),
        floatingActionButton: FloatingActionButton(
          onPressed: _increment,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inherited = CounterInheritedWidget.of(context);
    return Text(
      "当前计数: ${inherited?.counter}",
      style: TextStyle(fontSize: 24),
    );
  }
}

🔍 核心点

1. 数据存放在 InheritedWidget 中

   • 比如 counter。

2. 子 Widget 获取数据时要用 dependOnInheritedWidgetOfExactType

   • 这样，当 InheritedWidget 更新时，子 Widget 会自动 build。

3. updateShouldNotify 控制是否通知

   • 如果返回 true，依赖它的子 Widget 会重建。
   • 如果返回 false，不会触发更新（提高性能）。

---

📌 实际应用

• Flutter 内置：

  • Theme.of(context) → 通过 InheritedWidget 获取主题
  • MediaQuery.of(context) → 获取屏幕信息
  • Localizations.of(context) → 获取国际化

• 第三方库：

  • Provider、Riverpod、Bloc 等，都是对 InheritedWidget 的封装

---

✅ 总结

• InheritedWidget 是 数据共享的基石，可以避免参数层层传递。
• 适合做 全局状态（主题、语言、屏幕信息） 或 局部状态共享（比如父传子、兄弟组件共享数据）。
• 在实际项目中，我们很少直接用它，而是通过 Provider / Riverpod / Bloc 等更高级的封装。