【Flutter学习】之Widget数据共享之InheritedWidget

一,概述  

  业务开发中经常会碰到这样的情况,多个Widget需要同步同一份全局数据,比如点赞数、评论数、夜间模式等等。在安卓中,一般的实现方式是观察者模式,需要开发者自行实现并维护观察者的列表。在flutter中,原生提供了用于Widget间共享数据的InheritedWidget,当InheritedWidget发生变化时,它的子树中所有依赖了它的数据的Widget都会进行rebuild,这使得开发者省去了维护数据同步逻辑的麻烦。
  InheritedWidget是一个特殊的Widget,开发者可以将其作为另一个子树的父级放在Widgets树中。该子树的所有小部件都必须能够与该InheritedWidget公开的数据进行交互。

二,源码分析

  • InheritedWidget
    先来看下InheritedWidget的源码:

    abstract class InheritedWidget extends ProxyWidget {
      const InheritedWidget({ Key key, Widget child })
        : super(key: key, child: child);
    
      @override
      InheritedElement createElement() => new InheritedElement(this);
    
      @protected
      bool updateShouldNotify(covariant InheritedWidget oldWidget);
    }

    它继承自ProxyWidget:

    abstract class ProxyWidget extends Widget {
      const ProxyWidget({ Key key, @required this.child }) : super(key: key);
      final Widget child;
    }

    可以看出Widget内除了实现了createElement方法外没有其他操作了,它的实现关键一定就是InheritedElement了。

  • InheritedElement
    来看下InheritedElement源码

    class InheritedElement extends ProxyElement {
      InheritedElement(InheritedWidget widget) : super(widget);
    
      @override
      InheritedWidget get widget => super.widget;
    
      // 这个Set记录了所有依赖的Element
      final Set<Element> _dependents = new HashSet<Element>();
    
      // 该方法会在Element mount和activate方法中调用,_inheritedWidgets为基类Element中的成员,用于提高Widget查找父节点中的InheritedWidget的效率,它使用HashMap缓存了该节点的父节点中所有相关的InheritedElement,因此查找的时间复杂度为o(1)
      @override
      void _updateInheritance() {
        final Map<Type, InheritedElement> incomingWidgets = _parent?._inheritedWidgets;
        if (incomingWidgets != null)
          _inheritedWidgets = new HashMap<Type, InheritedElement>.from(incomingWidgets);
        else
          _inheritedWidgets = new HashMap<Type, InheritedElement>();
        _inheritedWidgets[widget.runtimeType] = this;
      }
    
      // 该方法在父类ProxyElement中调用,看名字就知道是通知依赖方该进行更新了,这里首先会调用重写的updateShouldNotify方法是否需要进行更新,然后遍历_dependents列表并调用didChangeDependencies方法,该方法内会调用mardNeedsBuild,于是在下一帧绘制流程中,对应的Widget就会进行rebuild,界面也就进行了更新
      @override
      void notifyClients(InheritedWidget oldWidget) {
        if (!widget.updateShouldNotify(oldWidget))
          return;
        for (Element dependent in _dependents) {
          dependent.didChangeDependencies();
        }
      }
    }

    其中_updateInheritance方法在基类Element中的实现如下:

    void _updateInheritance() {
      _inheritedWidgets = _parent?._inheritedWidgets;
    }

    总结来说就是Element在mount的过程中,如果不是InheritedElement,就简单的将缓存指向父节点的缓存,如果是InheritedElement,就创建一个缓存的副本,然后将自身添加到该副本中,这样做会有两个值得注意的点:

    1. InheritedElement的父节点们是无法查找到自己的,即InheritedWidget的数据只能由父节点向子节点传递,反之不能。
    2. 如果某节点的父节点有不止一个同一类型的InheritedWidget,调用inheritFromWidgetOfExactType获取到的是离自身最近的该类型的InheritedWidget。
  • 看到这里似乎还有一个问题没有解决,依赖它的Widget是在何时被添加到_dependents这个列表中的呢?

    回忆一下从InheritedWidget中取数据的过程,对于InheritedWidget有一个通用的约定就是添加static的of方法,该方法中通过inheritFromWidgetOfExactType找到parent中对应类型的的InheritedWidget的实例并返回,与此同时,也将自己注册到了依赖列表中,该方法的实现位于Element类,实现如下:

    @override
    InheritedWidget inheritFromWidgetOfExactType(Type targetType) {
      // 这里通过上述mount过程中建立的HashMap缓存找到对应类型的InheritedElement
      final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[targetType];
      if (ancestor != null) {
        // 这个列表记录了当前Element依赖的所有InheritedElement,用于在当前Element deactivate时,将自己从InheritedElement的_dependents列表中移除,避免不必要的更新操作
        _dependencies ??= new HashSet<InheritedElement>();
        _dependencies.add(ancestor);
        // 这里将自己添加到了_dependents列表中,相当于注册了监听
        ancestor._dependents.add(this);
        return ancestor.widget;
      }
      _hadUnsatisfiedDependencies = true;
      return null;
    }

三,示例demo

  • 自定义继承于InheritedWidget的类
    //模型数据
    class InheritedTestModel {
      final int count;
      const InheritedTestModel(this.count);
    }
    
    //自定义MyInheritedWidget(可以把它看成古代边城的哨所)
    class MyInheritedWidget extends InheritedWidget {
        //构造方法
        MyInheritedWidget({
          Key key,
          @required this.data, 
          @required Widget child //子组件
        }):super(key:key,child:child);  
    
        //属性
        final InheritedTestModel data;//共享的数据model
    
        //类方法
        static MyInheritedWidget of(BuildContext context){
          return context.inheritFromWidgetOfExactType(MyInheritedWidget);
        }
    
        //示例方法
      @override
      bool updateShouldNotify(MyInheritedWidget oldWidget) {
        // TODO: implement updateShouldNotify
        return data != oldWidget.data;
      }
    }

    代码解析

    • 此代码定义了一个名为“MyInheritedWidget”的Widget,旨在“共享”所有小部件(与子树的一部分)中的某些数据(data)。

      如前所述,为了能够传播/共享一些数据,需要将InheritedWidget定位在窗口小部件树的顶部,这解释了传递给InheritedWidget基础构造函数的“@required Widget child”。

    • Static MyInheritedWidget(BuildContext context)”方法允许所有子窗口小部件获取最接近上下文的MyInheritedWidget的实例(参见后面)

    • 最后,“updateShouldNotify”重写方法用于告诉InheritedWidget是否必须将通知传递给所有子窗口小部件(已注册/已订阅),如果对数据应用了修改(请参阅下文)。

      因此,我们需要将它放在树节点级别,如下所示:

      class MyParentWidget... {
         ...
         @override
         Widget build(BuildContext context){
            return new MyInheritedWidget(
               data: counter,
               child: new Row(
                  children: <Widget>[
                     ...
                  ],
               ),
            );
         }
      }
  • 子child如何访问InheritedWidget的数据?
    在构建子child时,后者将获得对InheritedWidget的引用,如下所示:

    class MyChildWidget... {
       ...
        
       @override
       Widget build(BuildContext context){
          final MyInheritedWidget inheritedWidget = MyInheritedWidget.of(context);
    
          /// 从此刻开始,窗口小部件可以使用MyInheritedWidget公开的数据
          /// 通过调用:inheritedWidget.data
          return new Container(
             color: inheritedWidget.data.color,
          );
       }
    }

   请考虑以下显示窗口小部件树结构的图表。

    

为了说明一种交互方式,我们假设如下:

    • '小部件A’是一个将项目添加到购物车的按钮;
    • 小部件B”是一个显示购物车中商品数量的文本;
    • “小部件C”位于小部件B旁边,是一个内部带有任何文本的文本;
    • 我们希望“Widget B”在按下“Widget A”时自动在购物车中显示正确数量的项目,但我们不希望重建“Widget C”

InheritedWidget就是用来干这个的Widget!

    • 示例代码:
      class Item {
         String reference;
         Item(this.reference);
      }
      
      class _MyInherited extends InheritedWidget {
        _MyInherited({
          Key key,
          @required Widget child,
          @required this.data,
        }) : super(key: key, child: child);
      
        final MyInheritedWidgetState data;
      
        @override
        bool updateShouldNotify(_MyInherited oldWidget) {
          return true;
        }
      }
      
      class MyInheritedWidget extends StatefulWidget {
        MyInheritedWidget({
          Key key,
          this.child,
        }): super(key: key);
      
        final Widget child;
      
        @override
        MyInheritedWidgetState createState() => new MyInheritedWidgetState();
      
        static MyInheritedWidgetState of(BuildContext context){
          return (context.inheritFromWidgetOfExactType(_MyInherited) as _MyInherited).data;
        }
      }
      
      class MyInheritedWidgetState extends State<MyInheritedWidget>{
        List<Item> _items = <Item>[];
        int get itemsCount => _items.length;
        void addItem(String reference){
          setState((){
            _items.add(new Item(reference));
          });
        }
      
        @override
        Widget build(BuildContext context){
          return new _MyInherited(
            data: this,
            child: widget.child,
          );
        }
      }
      
      class MyTree extends StatefulWidget {
        @override
        _MyTreeState createState() => new _MyTreeState();
      }
      
      class _MyTreeState extends State<MyTree> {
        @override
        Widget build(BuildContext context) {
          return new MyInheritedWidget(
            child: new Scaffold(
              appBar: new AppBar(
                title: new Text('Title'),
              ),
              body: new Column(
                children: <Widget>[
                  new WidgetA(),
                  new Container(
                    child: new Row(
                      children: <Widget>[
                        new Icon(Icons.shopping_cart),
                        new WidgetB(),
                        new WidgetC(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      }
      
      class WidgetA extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          final MyInheritedWidgetState state = MyInheritedWidget.of(context);
          return new Container(
            child: new RaisedButton(
              child: new Text('Add Item'),
              onPressed: () {
                state.addItem('new item');
              },
            ),
          );
        }
      }
      
      class WidgetB extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          final MyInheritedWidgetState state = MyInheritedWidget.of(context);
          return new Text('${state.itemsCount}');
        }
      }
      
      class WidgetC extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return new Text('I am Widget C');
        }
      }
    • 说明
      在这个非常基本的例子中,
      • _MyInherited是一个InheritedWidget,每次我们通过点击“Widget A”按钮添加一个Item时都会重新创建它
      • MyInheritedWidget是一个Widget,其状态包含Items列表。可以通过“(BuildContext context)的静态MyInheritedWidgetState”访问此状态。
      • MyInheritedWidgetState公开一个getter(itemsCount)和一个方法(addItem),以便它们可以被小部件使用,这是子小部件树的一部分
      • 每次我们向State添加一个Item时,MyInheritedWidgetState都会重建
      • MyTree类只是构建一个小部件树,将MyInheritedWidget作为树的父级
      • WidgetA是一个简单的RaisedButton,当按下它时,从最近的MyInheritedWidget调用addItem方法
      • WidgetB是一个简单的文本,显示最接近的MyInheritedWidget级别的项目数
  • 这一切如何运作
    • 注册Widget以供以后通知
      当子Widget调用MyInheritedWidget.of(context)时,它会调用MyInheritedWidget的以下方法,并传递自己的BuildContext。

      static MyInheritedWidgetState of(BuildContext context) {
        return (context.inheritFromWidgetOfExactType(_MyInherited) as _MyInherited).data;
      }

      在内部,除了简单地返回MyInheritedWidgetState的实例之外,它还将消费者窗口小部件订阅到更改通知。
      在场景后面,对这个静态方法的简单调用实际上做了两件事:

      • 当对InheritedWidget应用修改时,“consumer”窗口小部件会自动添加到将重建的订户列表中(此处为_MyInherited)
      • _MyInherited小部件(又名MyInheritedWidgetState)中引用的数据将返回给“使用者”
    • 过程
      由于’Widget A’和’Widget B’都已使用InheritedWidget订阅,因此如果对_MyInherited应用了修改,则当单击Widget A的RaisedButton时,操作流程如下(简化版本):
      • 调用MyInheritedWidgetState的addItem方法
      • MyInheritedWidgetState.addItem方法将新项添加到List
      • 调用setState()以重建MyInheritedWidget
      • 使用List 的新内容创建_MyInherited的新实例
      • _MyInherited记录在参数(数据)中传递的新State作为InheritedWidget,它检查是否需要“通知”“使用者”(答案为是)
      • 它迭代整个消费者列表(这里是Widget A和Widget B)并请求他们重建
      • 由于Wiget C不是消费者,因此不会重建。

 

但是,Widget A和Widget B都重建了,而重建Wiget A没用,因为它没有任何改变。如何防止这种情况发生?
在仍然访问“继承的”小组件时阻止某些小组件重建

Widget A也被重建的原因来自它访问MyInheritedWidgetState的方式。
正如我们之前看到的,调用context.inheritFromWidgetOfExactType()方法的实际上是自动将Widget订阅到“使用者”列表。

防止此自动订阅同时仍允许Widget A访问MyInheritedWidgetState的解决方案是更改MyInheritedWidget的静态方法,如下所示:

      static MyInheritedWidgetState of([BuildContext context, bool rebuild = true]){
          return (rebuild ? context.inheritFromWidgetOfExactType(_MyInherited) as _MyInherited
                    : context.ancestorWidgetOfExactType(_MyInherited) as _MyInherited).data;
       }

通过添加布尔类型的额外参数…

      • 如果“rebuild”参数为true(默认情况下),我们使用常规方法(并且Widget将添加到订阅者列表中)
      • 如果“rebuild”参数为false,我们仍然可以访问数据,但不使用InheritedWidget的内部实现

        因此,要完成解决方案,我们还需要稍微更新Widget A的代码,如下所示(我们添加false额外参数):
        class WidgetA extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            final MyInheritedWidgetState state = MyInheritedWidget.of(context, false);
            return new Container(
              child: new RaisedButton(
                child: new Text('Add Item'),
                onPressed: () {
                  state.addItem('new item');
                },
              ),
            );
          }
        }

        在那里,当我们按下它时,Widget A不再重建。

 

 

 



posted on 2019-07-15 17:28  梁飞宇  阅读(2313)  评论(0编辑  收藏  举报