Flutter之跨Widget传递数据

在Flutter中，UI是由不同粒度的Widget组成，这也导致了一些数据需要在Widget间传递。一般情况下，都是通过属性来进行数据的传递。但如果涉及到跨层传递时，属性可能需要跨越很多层才能传递给子组件，导致中间很多并不需要这个属性的组件，也得接收其子Widget的数据，繁琐且冗余。

所以这时候就需要使用其他方案来进行跨层传输，目前主要有InheritedWidget、Notification及EventBus三种方案来实现数据的跨层传输。

1、InheritedWidget

InheritedWidget主要用于底层Widget向上层Widget获取数据，也就是数据的传递方向是从由父Widget传递给子Widget，也就是说两个Widget必须有父子关系才能使用InheritedWidget。

1.1、InheritedWidget的使用

下面来看InheritedWidget的使用，如下。

//创建一个继承自InheritedWidget的类
class CountContainer extends InheritedWidget {
  //获取类型是CountContainer的InheritedWidget，时间复杂度是O(1)
  static CountContainer of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<CountContainer>();

  final int count;

  CountContainer({Key key, @required this.count, @required Widget child})
      : super(key: key, child: child);

  @override
  bool updateShouldNotify(covariant CountContainer oldWidget) =>
      count != oldWidget.count;
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //将CountContainer作为根节点，并使用0作为初始化count
    return CountContainer(count: 0, child: Counter());
  }
}
//CountContainer的使用
class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //获取InheritedWidget节点
    CountContainer state = CountContainer.of(context);
    return Scaffold(
      appBar: AppBar(title: Text("InheritedWidget demo")),
      body: Text(
        'You have pushed the button this many times: ${state.count}',
      ),
    );
  }
}

在上面代码中，有一个问题。那就是count的值是无法修改的。但如果要修改count的值，可以使用ChangeNotifier来进行值的更新。

class CountContainer<T extends ValueNotifier> extends InheritedNotifier {
  static CountContainer of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<CountContainer>();

  const CountContainer({
    Key key,
    this.notifier,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);
  final T notifier;
}
class _MyHomePageState extends State<MyHomePage> {
  //ValueNotifier继承自ChangeNotifier
  ValueNotifier _valueNotifier;
  int count = 0;

  @override
  void initState() {
    //创建一个ValueNotifier对象
    _valueNotifier = new ValueNotifier(0);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CountContainer(
      notifier: _valueNotifier,
      child: GestureDetector(
        onTap: () {
          count++;
          //值的更新
          _valueNotifier.value = count;
        },
        child: Counter(),
      ),
    );
  }
}

class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("InheritedWidget demo")),
      body: Text(
        'You have pushed the button this many times: ${CountContainer.of(context).notifier.value}',
      ),
    );
  }
}

通过上面代码，就能够使用InheritedWidge+ChangeNotifier来获取父Widget中可变化的数据。

provider中数据更新就是通过InheritedWidge+ChangeNotifier来实现的。

1.2、InheritedWidget的实现原理

再来看InheritedWidget的实现原理。它的核心实现再其InheritedElement中，代码如下。

class InheritedElement extends ProxyElement {
  /// Creates an element that uses the given widget as its configuration.
  InheritedElement(InheritedWidget widget) : super(widget);

  @override
  InheritedWidget get widget => super.widget as InheritedWidget;

  //存储Element
  final Map<Element, Object> _dependents = HashMap<Element, Object>();

  @override
  void _updateInheritance() {
    //获取父Element的_inheritedWidgets
    final Map<Type, InheritedElement> incomingWidgets = _parent?._inheritedWidgets;
    if (incomingWidgets != null)
      _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);
    else
      _inheritedWidgets = HashMap<Type, InheritedElement>();
    //将InheritedElement以widget.runtimeType为key添加到_inheritedWidgets中
    _inheritedWidgets[widget.runtimeType] = this;
  }
  
  @protected
  Object getDependencies(Element dependent) {
    //根据Element从_dependents中获取存储的值
    return _dependents[dependent];
  }

  @protected
  void setDependencies(Element dependent, Object value) {
    //将Element添加到_dependents中，value可为null
    _dependents[dependent] = value;
  }

  @protected
  void updateDependencies(Element dependent, Object aspect) {
    setDependencies(dependent, null);
  }

  @protected
  void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {
    //调用Element的didChangeDependencies方法，在didChangeDependencies方法中会重新绘制dependent所对应的Widget
    dependent.didChangeDependencies();
  }

  @override
  void updated(InheritedWidget oldWidget) {
    if (widget.updateShouldNotify(oldWidget))
      super.updated(oldWidget);
  }
  @override
  void notifyClients(InheritedWidget oldWidget) {
    //根据_dependents来遍历
    for (final Element dependent in _dependents.keys) {
      notifyDependent(oldWidget, dependent);
    }
  }
}

abstract class Element extends DiagnosticableTree implements BuildContext {
  //...
  void _updateInheritance() {
    //将父Element中_inheritedWidgets的值赋给当前Element的_inheritedWidgets
    _inheritedWidgets = _parent?._inheritedWidgets;
  }
  //...
}

先来看属性_inheritedWidgets，它是Element中的一个Map。如果当前Element是InheritedElement，则将当前Element添加到_inheritedWidgets中，否则就会将其父Element中的_inheritedWidgets的数据拷贝给当前Element的_inheritedWidgets。也就是每个Element中会存储当前Element到根Element中所有的InheritedElement对象，所以这也是dependOnInheritedWidgetOfExactType的时间复杂度为O(1)的原因。

abstract class Element extends DiagnosticableTree implements BuildContext {
  //...
  @override
  InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
    assert(ancestor != null);
    _dependencies ??= HashSet<InheritedElement>();
    _dependencies.add(ancestor);
    //将当前Element添加到`InheritedElement`的`_dependents`中
    ancestor.updateDependencies(this, aspect);
    //返回一个InheritedWidget对象
    return ancestor.widget;
  }
  //...
  @override
  T dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object aspect}) {
    //根据T的类型从_inheritedWidgets中获取InheritedElement，时间复杂度为O(1)
    final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
    if (ancestor != null) {
      return dependOnInheritedElement(ancestor, aspect: aspect) as T;
    }
    _hadUnsatisfiedDependencies = true;
    return null;
  }
  //...
}

在通过dependOnInheritedWidgetOfExactType获取InheritedWidget时，也会把当前Element添加到InheritedElement的_dependents中。

当调用InheritedElement的notifyClients方法时，就会遍历其_dependents，然后执行_dependents中Element的didChangeDependencies方法来更新UI。

abstract class Element extends DiagnosticableTree implements BuildContext {
  //...
  @mustCallSuper
  void didChangeDependencies() {
    //将当前Element标记为脏，在setState中最终调用的也是markNeedsBuild方法。
    markNeedsBuild();
  }
  //...
}

2、Notification

Notification主要用于底层Widget向上层Widget传递数据，也就是数据方向的传递方向是从子Widget传递给父Widget。也就是两个Widget必须有父子关系才能使用Notification。

2.1、Notification的使用

Notification需要与NotificationListener搭配使用。

//创建一个Notification对象
class CountContainer extends Notification {
  final int count;

  CountContainer(this.count);
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  int num = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("InheritedWidget demo")),
      body: NotificationListener<CountContainer>(
        //接受子widget传递过来的值
        onNotification: (CountContainer container) {
          setState(() {
            num = container.count + 1;
          });
          //返回false则表示还可以继续向上传递数据
          return false;
        },
        child: Column(
          children: [
            Text("当前num的值：$num"),
            NotificationListener<CountContainer>(
              child: Column(
                children: [Text("当前count的值：$count"), Counter()],
              ),
              //接受子widget传递过来的值
              onNotification: (CountContainer container) {
                setState(() {
                  count = container.count;
                });
                //返回false则表示还可以继续向上传递数据
                return false;
              },
            )
          ],
        ),
      ),
    );
  }
}

class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text("更新UI"),
      onPressed: () {
        //向父Widget传递数据
        CountContainer(1).dispatch(context);
      },
    );
  }
}

使用很简单，这里要注意一点的是onNotification对应函数的返回值。如果返回值为false，则表示数据还可以继续向上传递，直到根Widget。否则就到当前Widget为止。

2.2、Notification的实现原理

Notification的实现原理就很简单了。就是从当前Widget出发，向上遍历，找到对应的NotificationListener并把数据交给NotificationListener的_dispatch方法进行分发。代码实现如下。

abstract class Notification {
  const Notification();

  
  @protected
  @mustCallSuper
  bool visitAncestor(Element element) {
    if (element is StatelessElement) {
      final StatelessWidget widget = element.widget;
      if (widget is NotificationListener<Notification>) {
        //找到NotificationListener并交给其的_dispatch方法来处理数据
        if (widget._dispatch(this, element)) // that function checks the type dynamically
          return false;
      }
    }
    return true;
  }

  void dispatch(BuildContext target) {
    //从当前Widget向上遍历查找指定的NotificationListener，时间复杂度为O(n)
    target?.visitAncestorElements(visitAncestor);
  }
}

visitAncestorElements就是向上遍历Element的实现，而visitAncestor则是判断当前Widget是否是指定的NotificationListener的实现。

abstract class Element extends DiagnosticableTree implements BuildContext {
  //...
  @override
  void visitAncestorElements(bool visitor(Element element)) {
    Element ancestor = _parent;
    //如果visitor返回true且ancestor不为null，则表示继续向上遍历
    while (ancestor != null && visitor(ancestor))
      ancestor = ancestor._parent;
  }
  //...
}

visitAncestorElements的实现很简单，如上。所以查找指定NotificationListener的时间复杂度为O(n)。

3、EventBus

InheritedWidget与Notification必须要求两个Widget有父子关系才可进行数据的传输。但如果两个Widget是兄弟关系的话，那么就无法使用InheritedWidget及Notification。这时候就可以使用EventBus来进行数据的传输，当然具有父子关系的Widget也可以使用EventBus来进行数据的传输。

3.1、EventBus的使用

首先需要导入EventBus，如下。

  event_bus: ^1.1.1

导入成功后，下面就可以直接来使用EventBus。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("EventBus Demo"),
      ),
      body: Column(
        children: [
          //接受消息Widget
          MessageWidget(),
          //发送消息Widget
          OtherWidget(),
        ],
      ),
    );
  }
}

class Message {
  final String text;

  const Message(this.text);
}

class MessageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MessageWidgetState();
}

EventBus eventBus = new EventBus();

//展示消息Widget
class MessageWidgetState extends State<MessageWidget> {
  String text = "没任何消息";
  StreamSubscription subscription;

  @override
  void initState() {
    subscription = eventBus.on<Message>().listen((event) {
      setState(() {
        text = event.text;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    //不取消则存在内存泄漏
    subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text("当前消息：$text");
  }
}
//发送消息Widget
class OtherWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          eventBus.fire(Message("消息测试"));
        },
        child: Text("发送消息"));
  }
}

在上面代码中，MessageWidget与OtherWidget是兄弟关系，所以无法使用InheritedWidget与Notification来实现两个Widget间的通信，而使用EventBus正好实现了两者间的通信。

EventBus是基于Stream来实现的，关于其实现原理可以参考Flutter完整开发实战详解(十一、全面深入理解Stream)这篇文章。

4、总结

本文主要是对Flutter中Widget间通信做了一个介绍。虽然目前都推荐使用Provider，但还是需要了解本文中的三种方案，这样才能更好的使用provider及阅读provider源码。当然本文也是分析provider实现原理的前篇。