Flutter 之 InheritedWidget

InheritedWidget 是 Flutter 框架中的一个重要类，用于在 Widget 树中共享数据。它是 Flutter 中数据传递和状态管理的基础之一。通过 InheritedWidget，你可以让子 Widget 在不需要显式传递数据的情况下，访问祖先 Widget 中的数据。这种机制对于跨多个层次的 Widget 共享状态非常有效。

一、 为什么会有 InheritedWidget？

在 Flutter 中，Widget 树是单向的，意味着数据从上层（父 Widget）流向下层（子 Widget）。而 Flutter 中的 Widget 是不可变的，也就是说，你不能直接修改它们的状态。因此，当需要跨多个 Widget 层次传递状态或共享数据时，通常会遇到两类问题：

• **属性传递：**如果需要共享的数据传递层级过多，父 Widget 必须将数据一层一层地传递给子 Widget，直到最需要这个数据的 Widget。这个过程会导致代码变得冗长，维护困难。
• 数据共享： 在某些情况下，多个子 Widget 可能需要访问同一个数据源，这种情况下，直接通过构造函数传递数据显得非常不方便，尤其是在较深的 Widget 树中。

InheritedWidget 的出现正是为了解决这两个问题，它让 Widget 树中的任何子 Widget 可以便捷地访问到祖先 Widget 提供的数据，而不必显式地传递给每一个子 Widget。

二、InheritedWidget 的基本工作原理

InheritedWidget 是一个可以在 Widget 树中传播数据的 Widget。它通过实现 updateShouldNotify 方法来通知下层的 Widget，当数据发生变化时，这些 Widget 会重新构建（rebuild），从而获取新的数据。

• 当 InheritedWidget 发生变化时，它会通过 notifyClients 方法通知所有依赖于它的 Widget。
• 在 Widget 树中的下层 Widget 可以通过 of 方法获取到祖先 Widget 提供的状态（数据）。

三、InheritedWidget 的解决问题

• 跨越多层 Widget 树传递数据： 在 Widget 树的上层将数据放入 InheritedWidget 中后，所有的子 Widget 可以访问到该数据，而不需要通过构造函数一层一层地传递。
• 避免重复构建： 当 InheritedWidget 的数据发生变化时，只有依赖该数据的 Widget 会重新构建。其他不依赖该数据的 Widget 会保持不变，优化了性能。
• 简化状态管理： InheritedWidget 是许多状态管理解决方案（如 Provider、Riverpod 等）的基础，提供了一个简单且高效的方式来管理和共享状态。

四、 InheritedWidget 的使用例子

import 'package:flutter/material.dart';// 创建一个自定义的 InheritedWidget
class MyInheritedWidget extends InheritedWidget {final int counter;MyInheritedWidget({required Widget child, required this.counter}) : super(child: child);// 判断是否需要通知下层 Widget 更新@overridebool updateShouldNotify(MyInheritedWidget oldWidget) {return counter != oldWidget.counter;}// 提供获取数据的方法static MyInheritedWidget? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();}
}// 一个使用 InheritedWidget 的子 Widget
class CounterDisplay extends StatelessWidget {@overrideWidget build(BuildContext context) {final inheritedWidget = MyInheritedWidget.of(context);return Text('Counter: ${inheritedWidget?.counter ?? 0}');}
}void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {int counter = 0;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('InheritedWidget Example')),body: MyInheritedWidget(counter: counter,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [CounterDisplay(),ElevatedButton(onPressed: () {counter++;// 由于 counter 变化，MyInheritedWidget 会通知子 Widget 更新},child: Text('Increment Counter'),),],),),),);}
}

在上面的代码中：

• MyInheritedWidget 包含了一个 counter 变量，它可以被下层的子 Widget 访问。
• CounterDisplay 使用 MyInheritedWidget.of(context) 来获取并显示 counter 的值。
• 当按钮点击时，counter 值增加并重新构建整个 Widget 树。

五、 InheritedWidget 和性能

虽然 InheritedWidget 可以帮助我们轻松共享数据，但它也有一些限制，尤其是在性能上：

• 仅依赖 InheritedWidget 的子 Widget 会重新构建，但这个重新构建的范围可能是你未预料到的。因此，要谨慎使用，避免不必要的性能损耗。
• 对于复杂的应用，可能会更倾向于使用一些更强大的状态管理工具（如 Provider、Riverpod）来简化使用和提升性能。

六、疑问

1、InheritedWidget只能是父组件状态传递到子组件不能子组件传递到父组件吗

是的，InheritedWidget 的设计原则是从父组件向下传递数据，而不是从子组件向父组件传递数据。它主要用于共享 不可变的数据，或者是一些全局状态（如主题、语言、配置等），并使得在 InheritedWidget 树下的子 Widget 可以访问这些数据。

1、父组件到子组件的数据传递

InheritedWidget 允许父组件通过它传递数据到子组件。子组件通过 of 方法获取父组件（或祖先组件）中提供的状态或数据。例如，你可以通过一个 InheritedWidget 在树的上层传递一些数据（如计数器值），然后让树下的任何子组件获取该数据。

2、为什么不支持子组件传递到父组件？

InheritedWidget 是单向数据流的模型，它不支持反向传递（即子组件直接通知父组件更新）。这是因为 InheritedWidget 主要用于 数据共享，而不是 数据修改。其主要目的是提供一种高效的方式来向下共享数据，而不涉及子组件控制父组件的行为。

2、子组件的数据如何传递给父组件

要从子组件传递数据回父组件，通常有两种方式：

1. 回调函数（Callback）

子组件通过调用父组件传入的回调函数将数据或事件传递给父组件。父组件可以在回调函数中处理数据，并更新状态。

import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {@override_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int counter = 0;void _incrementCounter() {setState(() {counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Parent to Child Example')),body: Column(children: [Text('Counter: $counter'),ChildWidget(onPressed: _incrementCounter), // 传递回调函数],),);}
}class ChildWidget extends StatelessWidget {final VoidCallback onPressed;  // 回调函数ChildWidget({required this.onPressed});@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,  // 触发父组件传递的回调child: Text('Increment Counter'),);}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中：

• ParentWidget 通过 onPressed 回调函数传递给 ChildWidget。
• ChildWidget 点击按钮时会调用 onPressed 回调，通知父组件更新 counter。

2. 状态提升（Lift State Up）

如果需要共享和修改状态，可以将状态提升到最近的共同祖先组件，父组件和子组件都可以通过该祖先组件来管理和更新状态。通常，这种方式也与回调函数一起使用。

import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {@override_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int counter = 0;void _updateCounter(int value) {setState(() {counter = value;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('State Lifting Example')),body: Column(children: [Text('Counter: $counter'),ChildWidget(onCounterChanged: _updateCounter),  // 状态提升],),);}
}class ChildWidget extends StatelessWidget {final Function(int) onCounterChanged; // 传递回调ChildWidget({required this.onCounterChanged});@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: () {onCounterChanged(5);  // 修改父组件的状态},child: Text('Update Counter to 5'),);}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

总结

• InheritedWidget：主要用于将数据从父组件传递到子组件，子组件无法直接修改父组件的状态。
• 回调函数和状态提升：是从子组件向父组件传递数据或修改父组件状态的常用方法。

3、兄弟组件如何共享数据

在 Flutter 中，兄弟组件（即同一个父组件下的不同子组件）之间共享数据通常有几种方式。以下是几种常见的实现方法：

1. 通过父组件传递数据

最简单的方式是通过父组件来协调兄弟组件之间的通信。父组件将共享数据传递给它的子组件，然后子组件通过回调函数将数据发送回父组件，父组件再将数据传递给另一个子组件。这样可以保持数据流的单向性。

示例代码：

import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {@override_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int sharedData = 0;// 更新数据并通知所有子组件void updateSharedData(int newValue) {setState(() {sharedData = newValue;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Shared Data Between Siblings')),body: Column(children: [Text('Shared Data: $sharedData'),// 传递数据到子组件ChildWidget1(onDataChanged: updateSharedData),ChildWidget2(sharedData: sharedData),],),);}
}class ChildWidget1 extends StatelessWidget {final Function(int) onDataChanged;ChildWidget1({required this.onDataChanged});@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: () => onDataChanged(42), // 通过回调通知父组件更新数据child: Text('Update Data to 42'),);}
}class ChildWidget2 extends StatelessWidget {final int sharedData;ChildWidget2({required this.sharedData});@overrideWidget build(BuildContext context) {return Text('Child 2 sees Shared Data: $sharedData');}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中：

• ParentWidget 维护了 sharedData，并通过 updateSharedData 方法更新它。
• ChildWidget1 通过回调向父组件发送数据变更请求，父组件接收到数据后更新 sharedData。
• ChildWidget2 获取 sharedData，并显示它。

2. 使用 InheritedWidget 或 InheritedModel

如果你希望在多个兄弟组件之间共享数据，且不希望通过父组件直接传递数据，可以使用 InheritedWidget 或 InheritedModel 来共享数据。这两者能够在 Widget 树中向下传递数据，使得同一父级的多个子组件都可以访问这些数据。

使用 InheritedWidget 共享数据：

import 'package:flutter/material.dart';// 创建一个 InheritedWidget
class SharedData extends InheritedWidget {final int data;SharedData({required this.data, required Widget child}) : super(child: child);// 获取数据的静态方法static SharedData? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<SharedData>();}@overridebool updateShouldNotify(SharedData oldWidget) {return oldWidget.data != data;}
}class ParentWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Shared Data Using InheritedWidget')),body: SharedData(data: 100, // 共享数据child: Column(children: [ChildWidget1(),ChildWidget2(),],),),);}
}class ChildWidget1 extends StatelessWidget {@overrideWidget build(BuildContext context) {final sharedData = SharedData.of(context)?.data;return Text('Child 1 sees Shared Data: $sharedData');}
}class ChildWidget2 extends StatelessWidget {@overrideWidget build(BuildContext context) {final sharedData = SharedData.of(context)?.data;return Text('Child 2 sees Shared Data: $sharedData');}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中：

• SharedData 继承自 InheritedWidget，用于在树下的多个子组件之间共享数据。
• ChildWidget1 和 ChildWidget2 都可以通过 SharedData.of(context) 获取共享的 data。

3. 使用 Provider 包

如果需要跨多个页面或者复杂的共享数据，可以使用 Flutter 的状态管理框架，如 Provider。Provider 是一种比 InheritedWidget 更加简洁和灵活的解决方案。

七、总结

InheritedWidget 是 Flutter 中处理跨层次数据共享的基础工具。它能有效避免 “prop drilling” 问题，使得子 Widget 可以轻松访问祖先 Widget 的数据。它常常用作状态管理的基础，并且在 Flutter 中的许多第三方库和框架（如 Provider）中都有广泛应用。