第一百零一回 如何在组件树之间共享数据

我们在上一章回中介绍了"如何实现文件存储"相关的内容，本章回中将介绍 如何实现组件之间共享数据。闲话休提，让我们一起Talk Flutter吧。

概念介绍

数据共享是程序中常用的功能，本章回介绍如何在组件之间共享数据，不过这里提到的组件不是任意组件，主要指父组件与子组件，Flutter提供了InheritedWidget组件来实现共享数据的功能，本章回中将详细介绍如何使用该组件实现共享数据的功能。

使用方法

1. 创建一个父类，类中至少包含两个属性：共享数据和子组件(child)；
2. 父类继承自InheritedWidget类，实现父类的中方法；
3. 创建一个子类，子类中使用父类中共享的数据;
4. 创建子类对象并且将它赋值给父类对象的子组件属性(childe)；
5. 更新父类中的共享数据，子组件中的共享数据会自动更新；

示例代码

///定义父组件，父组件包含一个共享数据data
class FatherWidget extends InheritedWidget {
  String data;

  FatherWidget(
      {Key? key, this.data = "default data of Father", required Widget child})
      : super(key: key, child: child);

  ///定义获取父组件的方法，方便子组件获取父组件中的数据
  static FatherWidget? of(BuildContext context) {
    ///下面的方式可以通知子组件更新
    // return context.dependOnInheritedWidgetOfExactType();
    ///下面的方式无法通知子组件更新
    return context
        .getElementForInheritedWidgetOfExactType<FatherWidget>()
        ?.widget as FatherWidget;
  }

  ///返回true时通知更新子组件中的data，也就是调用子组件的didChangeDependencies()方法
  @override
  bool updateShouldNotify(FatherWidget oldWidget) {
    return oldWidget.data != data;
  }
}

///在子组件中使用父组件中的共享数据
class SonWidget extends StatefulWidget {
  const SonWidget({Key? key}) : super(key: key);

  @override
  State<SonWidget> createState() => _SonWidgetState();
}

class _SonWidgetState extends State<SonWidget> {
  @override
  Widget build(BuildContext context) {
    String? data = FatherWidget.of(context)?.data;
    return Text(
      "son data: $data",
      style: const TextStyle(color: Colors.white, fontSize: 24),
    );
  }

  @override
  void initState() {
    debugPrint("SonWidget: initState");
  }

  ///父组件中的数据更新时会回调此方法
  @override
  void didChangeDependencies() {
    debugPrint("SonWidget: didChangeDependencies");
  }

  @override
  void dispose() {
    debugPrint("SonWidget: dispose");
  }

  @override
  void activate() {
    debugPrint("SonWidget: activate");
  }

  @override
  void deactivate() {
    debugPrint("SonWidget: deactivate");
  }

  @override
  void didUpdateWidget(SonWidget oldWidget) {
    debugPrint("SonWidget: didUpdateWidget");
  }
}

children: [
  Container(
    width: 300,
    height: 100,
    alignment: Alignment.center,
    color: Colors.blue,
    child: FatherWidget(
      ///父组件和子组件形成组件树
      data: _tempData,
      child: const SonWidget(),
    ),
  ),
  SizedBox(
    width: 200,
    height: 100,
    child: ElevatedButton(
      onPressed: () {
        setState(() {
          ///更新父组件中的数据，子组件中数据会自动更新
          _tempData = "new data";
        });
      },
      child: const Text('Change data'),
    ),
  ),
],

代码中的FatherWidget是InheritedWidget的子类，重点关注一下of()方法的实现，通过该方法可以获取到FatherWidget的实例。该类中还有一个方法叫updateShouldNotify(),它决定是否更新子组件。

SonWidget本质上是Text组件的封装，它通过child属性与FatherWidget关联起来。代码中还提供了一个按钮，点击按钮时就会更新父组件中的数据，同时子组件中的数据也会被更新。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于"如何实现组件之间共享数据"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!