Flutter的Widget之间的通信方式及状态管理

Flutter的发展如火如荼，各大互联网公司都在使用。但是对于Widget之间的通信方式及状态管理，很多开发者其实并没有系统和全面的认识。

本文将从父Widget和子Widget之间的通信、跨多个Widget/页面之间的通信、状态管理这个三个方面讲解相关的知识及原理。

1 父Widget和子Widget之间的通信

父Widget和子Widget之间通信有4种方式：直接传值、传递函数、修改Key值、使用GlobalKey。

1.1 直接传值

父Widget通过子Widget的构造函数向子Widget传值。

1.2 传递函数

父Widget通过子Widget的构造函数传递一个函数对象给子Widget，子Widget通过调用父Widget的这个函数对象，调用父Widget中的函数。

1.3 修改Key的值

父Widget修改子Widget的参数Key的值，导致子Widget中的State重建。

从父Widget传递一个已经改变的值给子Widget。如果子Widget是StatelessWidget，使用1.1就可以。如果子Widget是StatefulWidget，使用setState并不能让StatefulWidget的State中的那个值改变。这时我们就可以修改Key值让StatefulWidget的State重建。

流程图如上，从源码中可以看到Key的继承结构如下：

每当我们调用setState的时候，framework会调用canUpdate对新旧Widget的类型以及key做判断，如果不相等就会重建子Widget的Element，而State是由StatefulElement的构造函数创建，所以StatefulElement的重建导致了State的重建。

子类ValueKey中，重写了操作符==，所以canUpdate比较的是ValueKey的参数value。

1.4 使用GlobalKey

创建一个GlobalKey对象，将它的引用作为参数赋值给子Widget。父Widget通过子Widget的GlobalKey，调用子Widget中的函数。

GlobalKey的流程图如上，蓝色为注册过程，绿色为使用过程。

源码分析如下：

GlobalKey里面有个公共的静态Map叫_registry。

在每个Element的mount()里面会先判断widget的参数key，如果是GlobalKey，就会将Widget的GlobalKey和对应的element做为key、value放入GlobalKey里面的公共的静态Map 中。

在Element的unmount()里面又会将这个GlobalKey移除。

GlobalKey中有个currentState的函数，会返回element的state，也就是StatefulWidget的State。

我们写代码时调用globalKey.currentState.doSomething()，里面其实就是调用了StatefulWidget的State中的doSomething()。

2 跨多个Widget/页面之间的通信

一种解决方案就是通过上面的父Widget和子Widget之间的通信方式，在多个Widget/页面之间从上往下逐层传递。但这样做就比较繁琐了，而且耦合太重。另一种解决方案就是使用一些状态管理的工具。

3 状态管理

什么是状态管理？状态管理是数据状态的集中管理和分发。通俗说，就是一个地方的数据改变了，其他使用这些数据的地方也要跟着改变。其实就是利用了观察者模式。

状态管理有8种方式：InheritedWidget、Stream、EventBus、Bloc、Scoped_model、Provider、Redux。

3.1 InheritedWidget

InheritedWidget是Flutter的Element树中的一种观察者模式。

InheritedWidget的流程图如上，蓝色为注册过程，绿色为刷新过程。Flutter中每个Element都持有相应的Widget的对象。

InheritedWidget源码分析如下：

Widget的build中参数就是context，context就是Element，我们调用context.inheritFromWidgetOfExactType(MyInheritedWidget)，其实是从Map _inheritedWidgets中取出InheritedElement，并返回自定义的MyInheritedWidget的对象。我们就可以从MyInheritedWidget对象得到共享的数据。

_inheritedWidgets这个Map是从哪里来的呢？是Element在mount里从父Element取得的，所以_inheritedWidgets这个Map是从上往下逐层传递的。

_inheritedWidgets这个Map最初是由谁创建的呢？是InheritedElement创建的。

以上是被观察者InheritedElement的注册与传递。那么观察者是怎么注册和刷新的呢？

context.inheritFromWidgetOfExactType(MyInheritedWidget)里面会同时将当前使用这个函数的Element加入到MyInheritedWidget所对应的InheritedElement的Map _dependents里面。

自定义的MyInheritedWidget需要重写updateShouldNotify()，如果返回true，就会从InheritedElement的Map _dependents里面取出所有调了inheritFromWidgetOfExactType()的Element，然后调用他们的didChangeDependencies()。Element的didChangeDependencies()里面调用了markNeedsBuild()，标记刷新，等待系统的Vsync信号来刷新。StatefulElement里面还调用了StatefulWidget的State的didChangeDependencies()。

3.2 Stream

Stream是Dart自带的一种观察者模式。这里重点讲下状态管理相关的广播流。

广播流的流程图如上，蓝色为注册过程，绿色为刷新过程。源码分析如下：

首先，创建一个广播型的StreamController。同步异步这两种BroadcastStreamController都继承了_BroadcastStreamController。BroadcastStreamController的stream是_BroadcastStream，BroadcastStream的父类是_ControllerStream，_ControllerStream的父类是_StreamImpl。

我们通过Stream调用listen()的时候，会调_StreamImpl的listen()。

然后在_StreamImpl的子类_ControllerStream中调用_createSubscription()。

在_ControllerStream的子类_BroadcastStreamController的_subscribe()中，创建_BroadcastSubscription。_BroadcastSubscription是一个双向链表结构。_BroadcastStreamController持有了这个双向链表的头尾。新创建的_BroadcastSubscription会加入到链表中。注册的回调函数会被_BroadcastSubscription的父类_BufferingStreamSubscription持有。

这是广播流的注册过程。下面我们看看怎么发送事件。

发送事件时我们会调用_BroadcastStreamController的add()，add()又调用了_sendData()。

_sendData()里会遍历_BroadcastSubscription链表，执行它的add()，最终会调到_BroadcastSubscription的父类_BufferingStreamSubscription的_sendData()，执行注册时在_BufferingStreamSubscription中持有的回调函数。

异步和同步：

同步如上。异步sendData后会调用scheduleMicrotask执行。scheduleMicrotask是Dart中执行异步操作的一种方式。

3.3 EventBus

EventBus对广播Stream做了简单封装，让广播Stream的使用更方便。使用方式和Android中的EventBus和广播是一样的，都需要注册和注销监听，发送和接收事件。

3.4 Bloc

Bloc内部封装了Stream，当然也可以使用InheritedWidget实现。Bloc采用MVVM的架构。既可以在全局作为状态管理的方式使用，也可以在局部作为MVVM使用。

3.5 Scoped_model

Scoped_model内部封装了InheritedWidget，采用MVVM的架构。既可以在全局作为状态管理的方式使用，也可以在局部作为MVVM使用。

3.6 Provider

Provider内部封装了InheritedWidget，采用MVVM的架构。既可以在全局作为状态管理的方式使用，也可以在局部作为MVVM使用。Provider使用更方便。谷歌官方团队出品和维护。

3.7 Redux

Redux内部封装了InheritedWidget。Redux使用比较繁琐，一般情况下不建议使用。

4 总结

如果是父Widget和子Widget之间的通信，采用上述第一章中的四种方式即可。如果是跨多个Widget/页面之间的通信，可以使用一些状态管理工具。这些状态管理工具中，InheritedWidget和Stream是基础，理解它们的原理有利于更好的理解其它状态管理工具。因为其它状态管理工具都是封装了InheritedWidget或Stream。