Flutter之Navigator源碼解析

在Flutter中，頁面的跳轉是經過Navigator來實現。經過幾句簡單的代碼就能夠實現頁面的跳轉並傳遞對應的參數。那麼具體實現是怎樣的尼？下面就來一窺究竟。

一、根Navigator

在Flutter中，一切皆Widget，Navigator也不能例外。但咱們並無主動添加Navigator，可是又能夠經過Navigator來進行頁面跳轉，這是怎麼回事尼？

咱們在進行Flutter開發時，必須以MaterialApp或WidgetsApp來做爲第一個Widget，不然就會出錯。也就是在WidgetsApp中（MaterialApp是對WidgetsApp的包裝），Flutter默認給咱們添加了第一個Navigator，通常跳轉都是根據這個Navigator來進行的。這也就是咱們沒有主動添加Navigator，但卻可以經過Navigator來進行頁面跳轉的緣由。以下圖所示。

從圖中能夠清晰的看到存在於 Widget樹中的第一個 Navigator，即根 Navigator。

對於Navigator，咱們通常都是經過Navigator.of(context)來獲取NavigatorState對象，而後經過NavigatorState對象中的函數來實現頁面跳轉、關閉、替換等。下面來看Navigator.of(context)的實現。

static NavigatorState of(
    BuildContext context, {
    bool rootNavigator = false,
    bool nullOk = false,
  }) {
    final NavigatorState navigator = rootNavigator
        //獲取根Navigator
        ? context.findRootAncestorStateOfType<NavigatorState>()
        //獲取距離當前Widget最近的Navigator
        : context.findAncestorStateOfType<NavigatorState>();
    return navigator;
  }
複製代碼

rootNavigator爲true表示獲取根Navigator，不然獲取距離當前Widget最近的Navigator，默認爲false。

能夠發現，這裏要想獲取根Navigator，就須要傳遞一個context對象，但在某些需求（如token失效跳轉登陸頁）下，沒法拿到context對象，但又須要跳轉，那這該怎麼辦尼？

這時候咱們能夠給根Navigator傳遞一個key，而後根據這個key拿到NavigatorState對象。而MaterialApp又給咱們提供了向根Navigator傳遞key的機會。

class MaterialApp extends StatefulWidget {
  const MaterialApp({
    Key key,
    //自定義key
    this.navigatorKey,
    ...
  })
}
複製代碼

經過給navigatorKey賦一個GlobalKey對象，而後經過這個對象就能夠不須要context來得到根Navigator，從而進行頁面的跳轉、返回、替換等。

二、push頁面源碼解析

當咱們正確的拿到NavigatorState對象後，就能夠經過push函數來跳轉到到新的頁面。

@optionalTypeArgs
  Future<T> push<T extends Object>(Route<T> route) {
    //獲取上一個route
    final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
    route._navigator = this;
    //獲取當前OverlayEntry對象
    route.install(_currentOverlayEntry);
    //將當前route添加到集合中
    _history.add(route);
    route.didPush();
    route.didChangeNext(null);
    if (oldRoute != null) {
      oldRoute.didChangeNext(route);
      route.didChangePrevious(oldRoute);
    }
    for (NavigatorObserver observer in widget.observers)
      observer.didPush(route, oldRoute);
    RouteNotificationMessages.maybeNotifyRouteChange(_routePushedMethod, route, oldRoute);
    _afterNavigation(route);
    return route.popped;
  }
複製代碼

在這裏，route（路由）是一個很是重要的概念，它對頁面進行了抽象。在Flutter中，一個頁面對應一個route對象。_history是NavigatorState中的一個數組，也是一般所說的路由棧。在跳轉一個新頁面時，會將route對象添加到_history數組中，彈出頁面則從該數組中移除route對象。

在上面代碼中，route.install(_currentOverlayEntry)是頁面跳轉的核心實現。install函數在Route中是一個空實現，在其子類ModalRoute中進行了具體實現。

abstract class ModalRoute<T> extends TransitionRoute<T> with LocalHistoryRoute<T> {

  ......
  
  @override
  void install(OverlayEntry insertionPoint) {
    super.install(insertionPoint);
    _animationProxy = ProxyAnimation(super.animation);
    _secondaryAnimationProxy = ProxyAnimation(super.secondaryAnimation);
  }
  ......
}
複製代碼

在ModalRoute裏的install函數中主要作了動畫相關的處理，而後交給父類執行。在其父類TransitionRoute主要是作動畫的建立及相關處理，並交給其父類處理。那麼再來看TransitionRoute的父類OverlayRoute。

abstract class OverlayRoute<T> extends Route<T> {

  .....

  /// Subclasses should override this getter to return the builders for the overlay.
  Iterable<OverlayEntry> createOverlayEntries();

  /// The entries this route has placed in the overlay.
  @override
  List<OverlayEntry> get overlayEntries => _overlayEntries;
  final List<OverlayEntry> _overlayEntries = <OverlayEntry>[];

  @override
  void install(OverlayEntry insertionPoint) {
    //建立頁面對應的兩個OverlayEntry對象並加入到_overlayEntries中，以待後續處理。
    _overlayEntries.addAll(createOverlayEntries());
    //進行UI的更新
    navigator.overlay?.insertAll(_overlayEntries, above: insertionPoint);
    //空實現
    super.install(insertionPoint);
  }
  
  ......
  
}
複製代碼

在OverlayRoute中有一個抽象函數createOverlayEntries，該函數須要在子類實現。代碼以下。

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

yield的含義先無論。該函數主要是建立兩個OverlayEntry對象，一個是咱們須要展現頁面所對應的OverlayEntry對象，一個是Barrier所對應的OverlayEntry對象。它兩的關係以下。

在 route所對應的兩個 OverlayEntry對象建立成功後，就加入到集合 _overlayEntries中，而後調用 OverlayState的 insertAll函數。

class OverlayState extends State<Overlay> with TickerProviderStateMixin {
  final List<OverlayEntry> _entries = <OverlayEntry>[];

  ......

  void insertAll(Iterable<OverlayEntry> entries, { OverlayEntry below, OverlayEntry above }) {
    if (entries.isEmpty)
      return;
    for (OverlayEntry entry in entries) {
      entry._overlay = this;
    }
    //更新UI
    setState(() {
      _entries.insertAll(_insertionIndex(below, above), entries);
    });
  }
  
  @override
  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,
    );
  }

  ......
  
}
複製代碼

在insertAll裏，就能夠發現頁面跳轉的本質了。就是經過setState來更新UI。

再來看OverlayState的build的函數，在該函數中會對須要保存在內存中的頁面進行分類，主要有如下兩類。

• onstageChildren：在該集合中的頁面會展現在屏幕中，也就是咱們可以看到的頁面。
• offstageChildren：該集合中的頁面存在於內存中，不會銷燬，也不會展現。主要目的是爲了下次加載時，方便從新加載，從而達到節省資源的目的。當maintainState爲true時就會添加到該集合，目前面跳轉的maintainState參數默認爲true。

來看一個示例。假設有三個頁面page一、page2及page3。咱們先給page2頁面的maintainState屬性設置不一樣值，而後觀察page2跳轉到page3時page2頁面的變化狀況。

能夠發現，當maintainState爲true時，會在內存中緩存page2頁面的全部對象，以便下次操做。固然若是後面不須要再次展現page2，那麼就最好將maintainState設爲false。

三、pop頁面源碼解析

前面分析了在flutter中如何跳轉一個新的頁面，那麼來看一下如何關閉一個頁面。關閉頁面是調用的pop函數。

bool pop<T extends Object>([ T result ]) {
    //從路由棧中獲取當前頁面對應的route對象
    final Route<dynamic> route = _history.last;
    bool debugPredictedWouldPop;
    if (route.didPop(result ?? route.currentResult)) {
      if (_history.length > 1) {
        //從集合中移除當前頁面所對應的route對象
        _history.removeLast();
        // If route._navigator is null, the route called finalizeRoute from
        // didPop, which means the route has already been disposed and doesn't
        // need to be added to _poppedRoutes for later disposal.
        if (route._navigator != null)
          _poppedRoutes.add(route);
        _history.last.didPopNext(route);
        for (NavigatorObserver observer in widget.observers)
          observer.didPop(route, _history.last);
        RouteNotificationMessages.maybeNotifyRouteChange(_routePoppedMethod, route, _history.last);
      } else {
        return false;
      }
    } else {}
    _afterNavigation<dynamic>(route);
    return true;
  }
複製代碼

這裏重點是didPop這個函數。該函數中會調用NavigatorState的finalizeRoute函數來釋放資源。而finalizeRoute又會調用route的dispose函數。

abstract class OverlayRoute<T> extends Route<T> {

  @override
  bool didPop(T result) {
    final bool returnValue = super.didPop(result);
    assert(returnValue);
    //釋放資源操做
    if (finishedWhenPopped)
      navigator.finalizeRoute(this);
    return returnValue;
  }

  //釋放資源
  @override
  void dispose() {
    //從_overlayEntries集合中移除當前頁面及Barrier層
    for (OverlayEntry entry in _overlayEntries)
      entry.remove();
    _overlayEntries.clear();
    super.dispose();
  }
}
複製代碼

在dispose函數中，會將_overlayEntries集合中清空，這裏之因此是集合並遍歷，是由於一個頁面對應2個OverlayEntry對象。

void remove() {
    final OverlayState overlay = _overlay;
    //取消OverlayEntry對OverlayState對象的引用
    _overlay = null;
    if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) {
      //若是當前正在渲染UI，則會等待渲染完畢後，才更新。
      SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
        //更新UI
        overlay._remove(this);
      });
    } else {
      //更新UI
      overlay._remove(this);
    }
  }
複製代碼

再來看OverlayState的_remove函數，該函數也是調用了setState函數。而後等待UI的刷新便可。

class OverlayState extends State<Overlay> with TickerProviderStateMixin {
  final List<OverlayEntry> _entries = <OverlayEntry>[];
  
  ......
  
  void _remove(OverlayEntry entry) {
    if (mounted) {
      setState(() {
        _entries.remove(entry);
      });
    }
  }
  
  ......
}
複製代碼

再來看上一個示例，在page2頁面關閉時的變化狀況。

能夠發現，當maintainState爲false時，從page3返回page2，會從新建立page2頁面的全部對象。若是page2頁面比較複雜，那麼此舉就比較耗資源，想必這也是maintainState默認爲true的緣由吧。

四、總結

固然，Navigator還有其餘實現函數，如pushNamed（根據routeName跳轉）、pushAndRemoveUntil（關閉並跳轉到新頁面）、replace（替換當前頁面）等。但這些函數的具體實現跟push及pop的實現基本上一致，因此只要理解了flutter中如何進行頁面跳轉，那麼也就基本上了解了Navigator的的實現原理。也就知道了彈窗的打開、關閉的實現原理，由於這些操做也是經過Navigator來實現的。

【參考資料】

Flutter進階：路由、路由棧詳解及案例分析

Flutter 路由原理解析