ProxyWidget和InheritedWidget区别

ProxyWidget 和 InheritedWidget 都是用于在 Flutter 组件树中传递数据的组件

ProxyWidget:

ProxyWidget 本身不包含任何 UI,它的作用是创建一个代理组件,将数据传递给这个代理组件的子组件。它的工作方式是:

1. ProxyWidget 提供 ProxyProvider,并指定数据类型。
2. 子组件使用 ProxyProvider.of<T>() 获取这个数据。
3. 如果子组件也是 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 的主要功能和作用是:

1. 在 Flutter 组件树中传递数据。
2. 允许子组件获取和修改这些数据。
3. 支持在数据向下流动的同时修改这些数据

InheritedWidget:

InheritedWidget 是一个抽象类,用于在组件树中从祖先组件向后代组件传递数据。它的工作方式是:

1. 祖先组件提供 InheritedWidget 的实现,并指定数据。
2. 后代组件使用 InheritedWidget.of() 获取这个数据。
3. 如果后代组件也是 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 的三个主要功能:

1. 在组件树中从父组件向子孙组件传递数据。
2. 当数据变化时,自动引起子树重建。
3. 有自己的生命周期方法。

区别:

1. 实现机制不同:

• ProxyWidget 通过创建一个代理组件来传递数据。子组件通过 ProxyProvider.of<T>() 获取数据。
• InheritedWidget 直接将数据传递给子孙后代组件。子组件通过 InheritedWidget.of() 获取数据。

2. 提供的功能不同:

• ProxyWidget 只提供了数据获取和修改的功能。
• InheritedWidget 除了数据传递外,还提供了标记子树需重新构建的功能(updateShouldNotify)。

3. 引起的重建不同:

• 如果 ProxyWidget 中的数据发生变化,它不会主动引起子组件的重建。子组件如果要响应数据变化,需要自己调用 markNeedsBuild() 方法。
• 如果 InheritedWidget 中的数据发生变化,它会自动引起子树的重建。

4. 生命周期不同:

• ProxyWidget 没有自己的生命周期,它依附于子组件。
• InheritedWidget 有自己的生命周期,当它被插入或移除组件树时,会被调用。
  所以,总体来说:
• 如果只是简单地想在组件树中传递数据,两个组件都可以胜任。
• 如果除了数据传递外,还需要标记子树重建、响应 InheritedWidget 生命周期,则 InheritedWidget 更合适。
• 如果要避免 InheritedWidget 自动引起子树重建,则 ProxyWidget 会更轻量一些。