Flutter 数据共享（InheritedWidget）

封面图 • 2025-11-03 • Flutter

在 Flutter 中，`InheritedWidget` 是一个非常强大的机制，用于在 widget 树中**共享数据**。它常用于跨层级传递数据，而不需要通过逐层传递参数（如 `Navigator.push` 或 `StatefulWidget` 的 `setState`）。

---

## 🧩 什么是 InheritedWidget？

`InheritedWidget` 是 Flutter 提供的一个基础类，允许你将数据从父 widget 传递到子 widget，而无需显式地传递每个层级的参数。

它的主要特点是：

- 数据可以被多个子 widget 共享。
- 不需要手动传递数据，Flutter 会自动处理。
- 可以结合 `BuildContext` 和 `InheritedWidget.of(context)` 来获取数据。

---

## ✅ 使用 InheritedWidget 的基本步骤

### 1. 创建自定义的 InheritedWidget

```dart
class MyData extends InheritedWidget {
  final String data;

MyData({required this.data, required Widget child}) : super(child: child);

// 静态方法，用于从 context 中获取数据
  static MyData of(BuildContext context) {
    final widget = context.dependOnInheritedWidgetOfExactType<MyData>();
    return widget!;
  }

@override
  bool updateShouldNotify(covariant MyData oldWidget) {
    return data != oldWidget.data;
  }
}
```

> 注意：`updateShouldNotify` 方法用于判断是否需要重新构建依赖该 widget 的子 widget。如果返回 `true`，那么所有依赖该 widget 的子 widget 都会被重建。

---

### 2. 在父组件中使用 MyData 包裹子组件

```dart
void main() {
  runApp(
    MyData(
      data: "Hello from InheritedWidget",
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("InheritedWidget Example")),
        body: Center(
          child: MyChildWidget(),
        ),
      ),
    );
  }
}
```

---

### 3. 在子组件中访问数据

```dart
class MyChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyData.of(context).data;
    return Text(data);
  }
}
```

---

## 🔄 为什么使用 InheritedWidget？

- **避免层层传递数据**：尤其是在深层嵌套的 widget 树中。
- **性能优化**：只更新那些依赖数据的 widget，而不是整个树。
- **状态管理的基础**：很多 Flutter 状态管理库（如 `Provider`）就是基于 `InheritedWidget` 实现的。

---

## 🧠 示例：动态更新数据

如果你想让数据变化时自动更新子 widget，可以通过 `StatefulWidget` 和 `InheritedWidget` 结合使用。

```dart
class MyData extends InheritedWidget {
  final String data;
  final VoidCallback onChanged;

MyData({
    required this.data,
    required this.onChanged,
    required Widget child,
  }) : super(child: child);

static MyData of(BuildContext context) {
    final widget = context.dependOnInheritedWidgetOfExactType<MyData>();
    return widget!;
  }

@override
  bool updateShouldNotify(covariant MyData oldWidget) {
    return data != oldWidget.data;
  }
}
```

然后在父 widget 中使用 `StatefulWidget` 控制数据：

```dart
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _data = "Initial Data";

void _updateData() {
    setState(() {
      _data = "Updated Data";
    });
  }

@override
  Widget build(BuildContext context) {
    return MyData(
      data: _data,
      onChanged: _updateData,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("InheritedWidget Example")),
          body: Center(
            child: Column(
              children: [
                MyChildWidget(),
                ElevatedButton(
                  onPressed: _updateData,
                  child: Text("Update Data"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

---

## 📌 总结

| 特性 | 说明 |
|------|------|
| 用途 | 跨层级共享数据 |
| 原理 | 通过 `InheritedWidget` 和 `BuildContext` 获取数据 |
| 优点 | 简化数据传递、提高性能 |
| 缺点 | 手动实现较复杂，适合高级用法 |

---

如果你是刚开始学习 Flutter，建议先使用 `Provider` 库来简化 `InheritedWidget` 的使用，它封装了 `InheritedWidget` 的逻辑，使代码更简洁。

---

需要我帮你写一个完整的 `InheritedWidget` 示例吗？或者你想了解如何用 `Provider` 替代 `InheritedWidget`？