美文网首页Flutter
2.数据共享(InheritedWidget)

2.数据共享(InheritedWidget)

作者: ankouyang | 来源:发表于2022-10-08 10:15 被阅读0次

    1. 简介

    InheritedWidget是 Flutter 中非常重要的一个功能型组件,它提供了一种在 widget 树中从上到下共享数据的方式,比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子widget 中来获取该共享的数据!这个特性在一些需要在整个 widget 树中共享数据的场景中非常方便!如Flutter SDK中正是通过 InheritedWidget 来共享应用主题(Theme)和 Locale (当前语言环境)信息的。

    InheritedWidget和 React 中的 context 功能类似,和逐级传递数据相比,它们能实现组件跨级传递数据。InheritedWidget的在 widget 树中数据传递方向是从上到下的,这和通知Notification(将在下一章中介绍)的传递方向正好相反。

    下面我们看一下之前“计数器”示例应用程序的InheritedWidget版本。需要说明的是,本示例主要是为了演示InheritedWidget的功能特性,并不是计数器的推荐实现方式。

    首先,我们通过继承InheritedWidget,将当前计数器点击次数保存在ShareDataWidget的data属性中:

    class ShareDataWidget extends InheritedWidget {
      ShareDataWidget({
        Key? key,
        required this.data,
        required Widget child,
      }) : super(key: key, child: child);
    
      final int data; //需要在子树中共享的数据,保存点击次数
    
      //定义一个便捷方法,方便子树中的widget获取共享数据
      static ShareDataWidget? of(BuildContext context) {
        return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
      }
    
      //该回调决定当data发生变化时,是否通知子树中依赖data的Widget重新build
      @override
      bool updateShouldNotify(ShareDataWidget old) {
        return old.data != data;
      }
    }
    

    然后我们实现一个子组件_TestWidget,在其build方法中引用ShareDataWidget中的数据。同时,在其didChangeDependencies() 回调中打印日志:


    image.png

    2. didChangeDependencies

    在之前介绍StatefulWidget时,我们提到State对象有一个didChangeDependencies回调,它会在“依赖”发生变化时被Flutter 框架调用。而这个“依赖”指的就是子 widget 是否使用了父 widget 中InheritedWidget的数据!如果使用了,则代表子 widget 有依赖;如果没有使用则代表没有依赖。这种机制可以使子组件在所依赖的InheritedWidget变化时来更新自身!比如当主题、locale(语言)等发生变化时,依赖其的子 widget 的didChangeDependencies方法将会被调用.

    相关文章

      网友评论

        本文标题:2.数据共享(InheritedWidget)

        本文链接:https://www.haomeiwen.com/subject/kmzwortx.html