認識一下Flutter中Navigator數據傳遞原理

引言

在Flutter中，路由間的頁面跳轉使用的是Navigator.push、Navigator.pop方法。

在頁面跳轉時如何將數據傳遞過去，目前有兩種方法：

一、目標頁面的構造函數顯式接收參數。例如跳轉過去的是SearchPage，接收一個字符串參數，則以下所示。

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new SearchPage("傳遞的參數")));
複製代碼

二、咱們還可使用Route的RouteSetting參數進行數據的傳遞。例如

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new SearchPage()
    , settings: RouteSettings(arguments: "傳遞的參數")));
複製代碼

在頁面SearchPage能夠這樣獲取傳遞過來的參數：

String arg = ModalRoute.of(context).settings.arguments;
複製代碼

這裏咱們想說一下第二種方式數據傳遞的原理，讓咱們從源碼中一窺究竟吧！

源碼解析

大推論

究竟怎麼開始分析源碼呢？咱們用打斷點的形式，就能一步一步地看到每個方法的執行過程，既然最終的目標頁是SearchPage，那麼咱們就將斷點打在SearchPage的build方法，因爲SearchPage是一個StatefulWidget，則斷點打在了SearchPageState的build方法裏，以下圖所示。

context是一個 StatefulElement，依次點開它的 _parent變量，以下兩圖所示。

最終看到了 Navigator的身影。也就是說，使用 Navigator.push方法跳轉到 SearchPage，則至關於將 SearchPage掛載在了 Navigator這個 Widget下， SearchPage至關於 Navigator的一個子組件。

接下來，咱們將斷點打在SearchPage中使用ModalRoute.of方法這一行，以下圖所示。

進入到 ModalRoute的 of方法。

static ModalRoute<T> of<T extends Object>(BuildContext context) {
    final _ModalScopeStatus widget = context.inheritFromWidgetOfExactType(_ModalScopeStatus);
    return widget?.route;
}
複製代碼

這裏的context就是SearchPageElement，調用了inheritFromWidgetOfExactType方法，並將_ModalScopeStatus做爲參數傳遞過去。

@override
  InheritedWidget inheritFromWidgetOfExactType(Type targetType, { Object aspect }) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[targetType];
    if (ancestor != null) {
      assert(ancestor is InheritedElement);
      return inheritFromElement(ancestor, aspect: aspect);
    }
    _hadUnsatisfiedDependencies = true;
    return null;
 }
複製代碼

上面的方法邏輯也挺簡單的，_inheritedWidgets是一個Map，若是不爲空則獲取_inheritedWidgets的key爲_ModalScopeStatus的InheritedElement對象。那麼_inheritedWidgets是何時被賦值的呢？咱們全局搜索一下，發如今 _updateInheritance中有對_inheritedWidgets進行操做。

void _updateInheritance() {
    assert(_active);
    final Map<Type, InheritedElement> incomingWidgets = _parent?._inheritedWidgets;
    if (incomingWidgets != null)
      _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);
    else
      _inheritedWidgets = HashMap<Type, InheritedElement>();
    _inheritedWidgets[widget.runtimeType] = this;
 }
複製代碼

首先它會將父類（_parent）的_inheritedWidgets賦值給本身的_inheritedWidgets，而後對於_inheritedWidgets的當前運行類型，將本身（this）進行賦值。

如今讓咱們回過頭來看一下上面的ModalRoute.of方法。

static ModalRoute<T> of<T extends Object>(BuildContext context) {
    final _ModalScopeStatus widget = context.inheritFromWidgetOfExactType(_ModalScopeStatus);
    return widget?.route;
}
複製代碼

第一行返回了_ModalScopeStatus對象。根據上面的結論，咱們知道_inheritedWidgets[_ModalScopeStatus]就是在_ModalScopeStatus的_updateInheritance進行賦值的。

也就是說context.inheritFromWidgetOfExactType實際上是從下往上尋找_ModalScopeStatus對象，而後of方法會返回_ModalScopeStatus的route變量。

從Navigator到SearchPage的Widget樹能夠看到，_ModalScopeStatus的確存在於上述的Widget樹中，以下圖所示。

因而咱們有理由得出以下大推論：

Navigator.push方法自上而下地產生了從Navigator到_ModalScopeStatus到SearchPage的Widget樹，而且Navigator將路由信息存儲在了_ModalScopeStatus這個Widget中，SearchPage自下而上尋找_ModalScopeStatus並獲取其中的路由信息。

驗證大推論

第一個小推論

爲了驗證上述推論的正確性，咱們從Navigator的build方法出發，一步步地看是否真的有將Route對象傳遞到_ModalScopeStatus對象。

Widget build(BuildContext context) {
    return Listener(
      onPointerDown: _handlePointerDown,
      onPointerUp: _handlePointerUpOrCancel,
      onPointerCancel: _handlePointerUpOrCancel,
      child: AbsorbPointer(
        absorbing: false, // it's mutated directly by _cancelActivePointers above child: FocusScope( node: focusScopeNode, autofocus: true, child: Overlay( key: _overlayKey, initialEntries: _initialOverlayEntries, ), ), ), ); } 複製代碼

從上面的build方法與上面打斷點時的Widget樹得知，Navigator的子Widget樹爲Listener->AbsorbPointer->FocusScope->Overlay，而Overlay的build方法以下。

Widget build(BuildContext context) {
    final List<Widget> onstageChildren = <Widget>[];
    final List<Widget> offstageChildren = <Widget>[];
    bool onstage = true;
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      if (onstage) {
        onstageChildren.add(_OverlayEntry(entry));
        if (entry.opaque)
          onstage = false;
      } else if (entry.maintainState) {
        offstageChildren.add(TickerMode(enabled: false, child: _OverlayEntry(entry)));
      }
    }
    return _Theatre(
      onstage: Stack(
        fit: StackFit.expand,
        children: onstageChildren.reversed.toList(growable: false),
      ),
      offstage: offstageChildren,
    );
 }
複製代碼

則Overlay的子Widget樹爲_Theatre->Stack，而Stack的children爲onstageChildren列表，則Stack的子Widget爲_OverlayEntry，而_OverlayEntry的build方法以下。

Widget build(BuildContext context) {
    return widget.entry.builder(context);
}
複製代碼

結合打斷點後 Navigator的子 Widget樹得知， _OverlayEntry的子 Widget爲 _ModalScope，也就是說咱們得出第一個小推論：

widget.entry.builder(context)返回的Widget就是_ModalScope。

驗證第一個小推論

咱們驗證一下對不對，widget.entry實際上是從OverlayState的_enties列表中獲取的，而_enties列表是在Navigator的build方法中經過Overlay傳遞_initialOverlayEntries參數初始化的。

child: Overlay(
    key: _overlayKey,
    initialEntries: _initialOverlayEntries,
),
複製代碼

而_initialOverlayEntries是在Navigator的initState初始化的。

void initState() {
    ...省略
    for (Route<dynamic> route in _history)
      _initialOverlayEntries.addAll(route.overlayEntries);
}
複製代碼

這裏傳遞進來的是Route對象的overlayEntries，而Route對象的overlayEntries，而這裏的Route對象實際上是MaterialPageRoute，因此的overlayEntries在MaterialPageRoute的父類OverlayRoute被重寫了，因此它真實的賦值是在OverlayRoute的install方法裏面，而install方法在Navigator.push方法中就被調用了，因此咱們看一下install方法。

void install(OverlayEntry insertionPoint) {
    assert(_overlayEntries.isEmpty);
    _overlayEntries.addAll(createOverlayEntries());
    navigator.overlay?.insertAll(_overlayEntries, above: insertionPoint);
    super.install(insertionPoint);
}
複製代碼

_overlayEntries添加了createOverlayEntries方法的執行結果。

Iterable<OverlayEntry> createOverlayEntries() sync* {
    yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
    yield OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
}
複製代碼

上面方法構建了一個OverlayEntry對象，其中的builder參數傳了_buildModalScope，而_buildModalScope返回的是_ModalScope對象。

Widget _buildModalScope(BuildContext context) {
    return _modalScopeCache ??= _ModalScope<T>(
      key: _scopeKey,
      route: this,
      // _ModalScope calls buildTransitions() and buildChild(), defined above
    );
}
複製代碼

到這裏，咱們終於驗證了第一個小推論的正確性，即_OverlayEntry的子Widget就是_ModalScope，並且這個_ModalScope還包含了路由信息，就是其中的route變量。

由小推論驗證大推論的正確性

咱們再來看_ModalScope的build方法。

Widget build(BuildContext context) {
    return _ModalScopeStatus(
      route: widget.route,
      ...省略
    );
 }
複製代碼

它返回了_ModalScopeStatus，並將它的route變量賦值給了_ModalScopeStatus的route變量，咱們上面說過_ModalScope的route變量就是MaterialPageRoute對象。

也就是說只要拿到了_ModalScopeStatus對象，就能經過它的route方法獲取MaterialPageRoute對象，並經過其中的setting變量獲取RouteSetting對象，而RouteSetting對象的arguments變量就是路由傳遞進來的參數了。

看到這裏，咱們就不難理解爲何在SearchPage中使用下面這樣的方法能獲取路由傳遞進來的數據的緣由了。

String arg = ModalRoute.of(context).settings.arguments;
複製代碼

由於經過ModalRoute.of(context)，SearchPage自下而上地尋找_ModalScopeStatus對象，_ModalScopeStatus對象找到後經過route變量找到Route對象，也就是MaterialPageRoute對象，而後經過訪問MaterialPageRoute對象的setting.arguments就能拿到Navigator傳遞進來的參數了，這就是Navigator數據傳遞的原理。

從上述分析中，咱們知道了Flutter中一個重要的功能型組件，它就是InheritedWidget，經過它咱們能夠實現跨組件的數據共享。有關更多InheritedWidget的使用方法，能夠參考 數據共享（InheritedWidget）