ProxyWidget 和 InheritedWidget 都是用于在 Flutter 组件树中传递数据的组件
ProxyWidget:
ProxyWidget 本身不包含任何 UI,它的作用是创建一个代理组件,将数据传递给这个代理组件的子组件。它的工作方式是:
- ProxyWidget 提供 ProxyProvider,并指定数据类型。
- 子组件使用 ProxyProvider.of<T>() 获取这个数据。
- 如果子组件也是 ProxyProvider,那么它还可以修改这个数据。
ProxyWidget 允许在组件树中自上而下地传递和修改数据。
简单示例
class DataProxy extends ProxyProvider<int> {
DataProxy({int data, Widget child}): super(data: data, child: child);
}
class WidgetA extends StatelessWidget {
@override
Widget build(BuildContext context) {
final int data = ProxyProvider.of<int>(context);
print(data); // Prints 1
return DataProxy(data: 2, child: WidgetB());
}
}
class WidgetB extends StatelessWidget {
@override
Widget build(BuildContext context) {
final int data = ProxyProvider.of<int>(context);
print(data); // Prints 2
}
}
所以,这个示例展示了 ProxyWidget 的两个主要功能:
1. 向下传递数据:DataProxy 将 int 类型的数据(初始值为 1)向下传递给子组件。
2. 允许修改数据:WidgetA 通过 DataProxy 修改了向下传递的数据,从 1 改为 2。
所以,ProxyWidget 的主要功能和作用是:
- 在 Flutter 组件树中传递数据。
- 允许子组件获取和修改这些数据。
- 支持在数据向下流动的同时修改这些数据
InheritedWidget:
InheritedWidget 是一个抽象类,用于在组件树中从祖先组件向后代组件传递数据。它的工作方式是:
- 祖先组件提供 InheritedWidget 的实现,并指定数据。
- 后代组件使用 InheritedWidget.of() 获取这个数据。
- 如果后代组件也是 InheritedWidget,那么它还可以修改这个数据。
InheritedWidget 允许在组件树中自上而下地传递和修改数据。
class DataInherited extends InheritedWidget {
final int data;
DataInherited({this.data, Widget child}) : super(child: child);
static DataInherited of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<DataInherited>();
}
@override
bool updateShouldNotify(DataInherited oldWidget) {
return data != oldWidget.data;
}
}
class WidgetA extends StatelessWidget {
@override
Widget build(BuildContext context) {
final int data = DataInherited.of(context).data;
print(data); // Prints 1
}
}
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
int data = 1;
@override
Widget build(BuildContext context) {
return DataInherited(
data: data,
child: WidgetA(),
);
}
}
这个示例展示了 InheritedWidget 的用法:
1. 我们定义了一个 DataInherited 类,继承自 InheritedWidget,用于传递 int 类型的数据。
2. ParentWidget 是 DataInherited 的父组件,它提供了初始数据 1。
3. WidgetA 是 DataInherited 的子组件,它通过 DataInherited.of(context) 获取到父组件传下来的数据 1。
4. 如果 ParentWidget 中的数据发生变化,DataInherited 的 updateShouldNotify 方法会返回 true,引起子树重建,WidgetA 会获取到最新的数据。
5. DataInherited 作为 InheritedWidget,当它插入或移除组件树时,会调用 InheritedWidget 的生命周期方法。
所以,这个示例展示了 InheritedWidget 的三个主要功能:
- 在组件树中从父组件向子孙组件传递数据。
- 当数据变化时,自动引起子树重建。
- 有自己的生命周期方法。
区别:
- 实现机制不同:
- ProxyWidget 通过创建一个代理组件来传递数据。子组件通过 ProxyProvider.of<T>() 获取数据。
- InheritedWidget 直接将数据传递给子孙后代组件。子组件通过 InheritedWidget.of() 获取数据。
- 提供的功能不同:
- ProxyWidget 只提供了数据获取和修改的功能。
- InheritedWidget 除了数据传递外,还提供了标记子树需重新构建的功能(updateShouldNotify)。
- 引起的重建不同:
- 如果 ProxyWidget 中的数据发生变化,它不会主动引起子组件的重建。子组件如果要响应数据变化,需要自己调用 markNeedsBuild() 方法。
- 如果 InheritedWidget 中的数据发生变化,它会自动引起子树的重建。
- 生命周期不同:
- ProxyWidget 没有自己的生命周期,它依附于子组件。
- InheritedWidget 有自己的生命周期,当它被插入或移除组件树时,会被调用。
所以,总体来说: - 如果只是简单地想在组件树中传递数据,两个组件都可以胜任。
- 如果除了数据传递外,还需要标记子树重建、响应 InheritedWidget 生命周期,则 InheritedWidget 更合适。
- 如果要避免 InheritedWidget 自动引起子树重建,则 ProxyWidget 会更轻量一些。
