Navigator 2.0作為新一代的路由提供了申明式的API，更加符合Flutter的風(fēng)格。Navigator 2.0向前兼容，新增了一些新的API，使用的方式和Navigator 1.0相比有較大的差別。

本文將詳細(xì)解析Navigator 2.0的底層邏輯，讓大家對(duì)它有一個(gè)深入的了解，這樣在使用上會(huì)更加的得心應(yīng)手。

Navigator 2.0 誕生的背景

Flutter官方團(tuán)隊(duì)改造路由主要有幾點(diǎn)原因：

1. Navigator 1.0 只提供了一些push(), pushNamed()和 pop()等簡(jiǎn)單的API。實(shí)現(xiàn)壓入或者彈出多個(gè)頁(yè)面很困難，更難實(shí)現(xiàn)對(duì)棧內(nèi)中間頁(yè)面的移除，交換等操作；
2. Flutter隨著2.0的到來(lái)實(shí)現(xiàn)了全平臺(tái)的支持，這樣也就新出現(xiàn)一些使用場(chǎng)景，譬如網(wǎng)頁(yè)修改URL地址等，這些就需要新的API來(lái)支持；
3. Navigator 2.0滿足了嵌套路由的需求場(chǎng)景，這樣開(kāi)發(fā)者在使用時(shí)就更加的靈活和方便；
4. Navigator 2.0提供的是申明式的API，解決了以前路由命令式編程的方式，讓編程的風(fēng)格統(tǒng)一。

Navigator 2.0的API雖然比較的多，但是邏輯還是比較清晰的，我們來(lái)一個(gè)個(gè)的進(jìn)行介紹。

Page

Page代表頁(yè)面不可變的的配置信息，代表一個(gè)頁(yè)面，類似于Widget配置信息轉(zhuǎn)換成Element, Page配置的信息會(huì)轉(zhuǎn)換成Route。

abstract class Page<T> extends RouteSettings {
  
  const Page({
    this.key,
    String? name,
    Object? arguments,
    this.restorationId,
  }) : super(name: name, arguments: arguments);


  bool canUpdate(Page<dynamic> other) {
    return other.runtimeType == runtimeType &&
           other.key == key;
  }

  @factory
  Route<T> createRoute(BuildContext context);
}

1. createRoute就是轉(zhuǎn)換成Route的方法；
2. canUpdate的實(shí)現(xiàn)方式和Widget的一樣，也是用于diff算法。

RouteSettings

Page的父類RouteSettings僅僅用來(lái)保存name和arguments這兩個(gè)值。

const RouteSettings({
    this.name,
    this.arguments,
});

Route

Route代表一個(gè)頁(yè)面，是Navigator棧中真正管理的內(nèi)容。

abstract class Route<T> {
    
    // 1   
    RouteSettings get settings => _settings;
    NavigatorState? get navigator => _navigator;

    // 2
    List<OverlayEntry> get overlayEntries => const <OverlayEntry>[];
    
    // 3
    void install() {}
    TickerFuture didPush() {}
    ...
    
}

1. Route持有了配置對(duì)象page和管理它的navigator對(duì)象;
2. Route還持有一個(gè)OverlayEntry數(shù)組，OverlayEntry放置在類似于Stack的Overlay上，我們寫的頁(yè)面就是放置在一個(gè)OverlayEntry上的；
3. Route還定義了一些協(xié)議方法需要子類覆寫，這些方法主要是route的狀態(tài)變化后收到的回調(diào)函數(shù)，這些函數(shù)調(diào)用主要來(lái)自于_RouteEntry。

MaterialPage 和 _PageBasedMaterialPageRoute

我們可以直接使用系統(tǒng)給我們提供的Page類，也可以自定義繼承自Page的類。我們來(lái)看看官方給我們提供的MaterialPage的邏輯。

MaterialPage的Route是_PageBasedMaterialPageRoute類，它的繼承邏輯是：_PageBasedMaterialPageRoute -> PageRoute -> ModalRoute -> TransitionRoute -> OverlayRoute + LocalHistoryRoute -> Route。

LocalHistoryRoute

LocalHistoryRoute可以給Route添加一些LocalHistoryEntry。當(dāng)LocalHistoryEntry不為空時(shí)，didPop方法調(diào)用的時(shí)候會(huì)移除最后一個(gè)LocalHistoryEntry，否則Route就要被pop了。

OverlayRoute

OverlayRoute主要是持有Route對(duì)應(yīng)的OverlayEntry數(shù)組，這個(gè)數(shù)組是子類在被插入navigator的時(shí)候?qū)ζ溥M(jìn)行賦值的。

abstract class OverlayRoute<T> extends Route<T> {
    @factory
    Iterable<OverlayEntry> createOverlayEntries();
    
    List<OverlayEntry> get overlayEntries => _overlayEntries;
    
    void install() {
        _overlayEntries.addAll(createOverlayEntries());
        super.install();
    }
}

TransitionRoute

TransitionRoute是主要是負(fù)責(zé)動(dòng)畫部分。

abstract class TransitionRoute<T> extends OverlayRoute<T> {
    
    Animation<double>? get animation => _animation;
    Animation<double>? get secondaryAnimation => _secondaryAnimation;
    
    void install() {
        _animation = createAnimation()
          ..addStatusListener(_handleStatusChanged);
        super.install();
    }
    
    TickerFuture didPush() {
        super.didPush();
        return _controller!.forward();
    }
    
    void didAdd() {
        super.didAdd();
        _controller!.value = _controller!.upperBound;
    }
    
    bool didPop(T? result) {
        _controller!.reverse();
        return super.didPop(result);
    }

    void didPopNext(Route<dynamic> nextRoute) {
        _updateSecondaryAnimation(nextRoute);
        super.didPopNext(nextRoute);
    }

    void didChangeNext(Route<dynamic>? nextRoute) {
        _updateSecondaryAnimation(nextRoute);
        super.didChangeNext(nextRoute);
    }
}

1. TransitionRoute有_animation和secondaryAnimation兩個(gè)動(dòng)畫,前者負(fù)責(zé)當(dāng)前Route的push和pop動(dòng)畫，后者負(fù)責(zé)下一個(gè)Route進(jìn)行push和pop時(shí)本身這個(gè)Route的動(dòng)畫。
2. _animation是install就生成了，secondaryAnimation可以大部分情況下就是下一個(gè)Route的_animation, 所以didPopNext和didChangeNext時(shí)需要更新secondaryAnimation。
3. 如果不需要?jiǎng)赢嫊r(shí)調(diào)用的是didAdd方法，Route是被動(dòng)調(diào)用的這個(gè)方法，其實(shí)是_RouteEntry根據(jù)(Navigator確定的)狀態(tài)判斷調(diào)用的這個(gè)方法。

ModalRoute

ModalRoute主要的作用是阻止除最上層的Route之外的Route進(jìn)行用戶交互，其中的知識(shí)點(diǎn)也是非常豐富的。

abstract class ModalRoute<T> extends TransitionRoute<T> with LocalHistoryRoute<T> {
    
  Iterable<OverlayEntry> createOverlayEntries() sync* {
    yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
    yield _modalScope = OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
  }

}

1. ModalRoute生成了兩個(gè)非常重要的OverlayEntry---_modalBarrier和_modalScope。
2. _modalBarrier實(shí)現(xiàn)了阻止用戶對(duì)最上層Route之外的Route進(jìn)行用戶交互的功能；
3. _modalScope會(huì)持有router自身，_modalScope在構(gòu)建的時(shí)候就會(huì)調(diào)用router的buildTransitions和buildChild方法，參數(shù)都包含router的animation和secondaryAnimation,也就是TransitionRoute中的兩個(gè)動(dòng)畫屬性；

Widget _buildModalScope(BuildContext context) {
    return _modalScopeCache ??= Semantics(
      sortKey: const OrdinalSortKey(0.0),
      child: _ModalScope<T>(
        key: _scopeKey,
        route: this,
        // _ModalScope calls buildTransitions() and buildChild(), defined above
      )
    );
}

Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation);

Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return child;
}

我們接下來(lái)看看_ModalScope的_ModalScopeState的內(nèi)容：

class _ModalScopeState<T> extends State<_ModalScope<T>> {
    
    late Listenable _listenable;
    
    final FocusScopeNode focusScopeNode = FocusScopeNode(debugLabel: '$_ModalScopeState Focus Scope');
    
    void initState() {
        super.initState();
        final List<Listenable> animations = <Listenable>[
          if (widget.route.animation != null) widget.route.animation!,
          if (widget.route.secondaryAnimation != null) widget.route.secondaryAnimation!,
        ];
        _listenable = Listenable.merge(animations);
        if (widget.route.isCurrent) {
          widget.route.navigator!.focusScopeNode.setFirstFocus(focusScopeNode);
        }
    }
}

1. _listenable是route的animation和secondaryAnimation的組合；
2. focusScopeNode是焦點(diǎn)，初始化的時(shí)候?qū)?code>navigator的焦點(diǎn)設(shè)置為這個(gè)焦點(diǎn)，這樣就實(shí)現(xiàn)了最上層的Route才獲取到焦點(diǎn)，屏蔽對(duì)其他Route的焦點(diǎn)獲取；

  Widget build(BuildContext context) {
    // 1 RestorationScope
    return AnimatedBuilder(
      animation: widget.route.restorationScopeId,
      builder: (BuildContext context, Widget? child) {
        return RestorationScope(
          restorationId: widget.route.restorationScopeId.value,
          child: child!,
        );
      },
      // 2 _ModalScopeStatus
      child: _ModalScopeStatus(
        route: widget.route,
        isCurrent: widget.route.isCurrent, // _routeSetState is called if this updates
        canPop: widget.route.canPop, // _routeSetState is called if this updates
        child: Offstage(
          offstage: widget.route.offstage, // _routeSetState is called if this updates
          child: PageStorage(
            bucket: widget.route._storageBucket, // immutable
            child: Builder(
              builder: (BuildContext context) {
                return Actions(
                  actions: <Type, Action<Intent>>{
                    DismissIntent: _DismissModalAction(context),
                  },
                  child: PrimaryScrollController(
                    controller: primaryScrollController,
                    child: FocusScope(
                      node: focusScopeNode, // immutable
                      // 3 RepaintBoundary
                      child: RepaintBoundary(
                        // 4. AnimatedBuilder
                        child: AnimatedBuilder(
                          animation: _listenable, // immutable
                          builder: (BuildContext context, Widget? child) {
                            // 5. buildTransitions
                            return widget.route.buildTransitions(
                              context,
                              widget.route.animation!,
                              widget.route.secondaryAnimation!,
                              AnimatedBuilder(
                                animation: widget.route.navigator?.userGestureInProgressNotifier ?? ValueNotifier<bool>(false),
                                builder: (BuildContext context, Widget? child) {
                                  final bool ignoreEvents = _shouldIgnoreFocusRequest;
                                  focusScopeNode.canRequestFocus = !ignoreEvents;
                                  return IgnorePointer(
                                    ignoring: ignoreEvents,
                                    child: child,
                                  );
                                },
                                child: child,
                              ),
                            );
                          },
                          child: _page ??= RepaintBoundary(
                            key: widget.route._subtreeKey, // immutable
                            child: Builder(
                              builder: (BuildContext context) {
                                return widget.route.buildPage(
                                  context,
                                  widget.route.animation!,
                                  widget.route.secondaryAnimation!,
                                );
                              },
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }

_ModalScopeState的build方法是設(shè)計(jì)非常精妙的一個(gè)方法：

1. RestorationScope負(fù)責(zé)Route用于恢復(fù)數(shù)據(jù)的作用；
2. _ModalScopeStatus是InheritedWidget，它保持對(duì)Route的引用，所以我們?cè)谡{(diào)用ModalRoute.of(contex)獲取頁(yè)面?zhèn)鲄r(shí)，就是通過(guò)獲取的這個(gè)_ModalScopeStatus，再找到對(duì)應(yīng)的傳參。
3. 中間放置了一個(gè)RepaintBoundary可以限制重繪的區(qū)域，這樣可以提高進(jìn)行動(dòng)畫時(shí)繪制的效率；
4. 最底層的AnimatedBuilder這個(gè)Widget是核心，這個(gè)AnimatedBuilder的child是由route.buildPage()這個(gè)方法創(chuàng)建的，其實(shí)就是我們Page的child，即開(kāi)發(fā)者寫的頁(yè)面內(nèi)容；這個(gè)AnimatedBuilder的builder方法中調(diào)用了route.buildTransitions(),它驅(qū)動(dòng)動(dòng)畫是_listenable，也就是說(shuō)animation和secondaryAnimation都能驅(qū)動(dòng)它的動(dòng)畫過(guò)程。這其實(shí)很好理解：當(dāng)前Route的pop和push和下個(gè)Route的pop和push都會(huì)觸發(fā)動(dòng)畫的產(chǎn)生。

PageRoute

PageRoute主要就是讓最上層下面的Route不可見(jiàn)，點(diǎn)擊_modalBarrier不讓當(dāng)前Route從Navigator棧中彈出。

abstract class PageRoute<T> extends ModalRoute<T> {

  @override
  bool get opaque => true;

  @override
  bool get barrierDismissible => false;

}

_PageBasedMaterialPageRoute

_PageBasedMaterialPageRoute的作用是覆寫了buildPage方法, 返回的是開(kāi)發(fā)者寫的界面；

class _PageBasedMaterialPageRoute<T> extends PageRoute<T> with MaterialRouteTransitionMixin<T> {
    Widget buildContent(BuildContext context) {
        return _page.child;
    }
}

官方為我們提供了默認(rèn)的pop和push動(dòng)畫，它們就在混入的MaterialRouteTransitionMixin中實(shí)現(xiàn)的。MaterialRouteTransitionMixin會(huì)根據(jù)不同的平臺(tái)有不同的實(shí)現(xiàn)，iOS是左右的動(dòng)畫，Android是上下的動(dòng)畫，web也是左右動(dòng)畫。

我們以iOS為例，其最后使用的是CupertinoPageTransition這個(gè)類的方法：

SlideTransition(
    position: _secondaryPositionAnimation,
    textDirection: textDirection,
    transformHitTests: false,
    child: SlideTransition(
    position: _primaryPositionAnimation,
    textDirection: textDirection,
    child: DecoratedBoxTransition(
        decoration: _primaryShadowAnimation,
        child: child,
    ),
)

看到SlideTransition嵌套到一個(gè)child上是不是很疑惑？?jī)蓚€(gè)動(dòng)畫用在一個(gè)Widget上？

先解釋下其他參數(shù)：

1. textDirection決定了滑動(dòng)的方法，因?yàn)橛行┱Z(yǔ)言是從右到左排序的；
2. transformHitTests設(shè)置為flase,點(diǎn)擊事件的響應(yīng)位置不受動(dòng)畫的影響；
3. _primaryShadowAnimation是設(shè)置了一個(gè)動(dòng)畫中的陰影。

_secondaryPositionAnimation是從Offset.zero到Offset(-1.0/3.0, 0.0)，正常情況下就是從右往左移動(dòng)1/3的屏幕寬度。

final Animatable<Offset> _kMiddleLeftTween = Tween<Offset>(
  begin: Offset.zero,
  end: const Offset(-1.0/3.0, 0.0),
);

_primaryPositionAnimation是從Offset(1.0, 0.0)到Offset.zero，正常情況下就是從不可見(jiàn)的屏幕右邊移動(dòng)到屏幕最左邊，然后占據(jù)整個(gè)屏幕寬度。

final Animatable<Offset> _kRightMiddleTween = Tween<Offset>(
  begin: const Offset(1.0, 0.0),
  end: Offset.zero,
);

我們接下來(lái)解釋下pop一個(gè)Route時(shí)候的動(dòng)畫邏輯, Animation:0->1

1. 新加的Route是被_primaryPositionAnimation直接驅(qū)動(dòng)的，也就是執(zhí)行了從右到左的_kRightMiddleTween動(dòng)畫;
2. _secondaryPositionAnimation只是被修改了值，我們前面TransitionRoute的介紹中提到過(guò)，新加入Route的animation賦值給了前一個(gè)Route的secondaryAnimation屬性。_ModalScopeState中介紹過(guò)secondaryAnimation也能驅(qū)動(dòng)Route的動(dòng)畫，也就是說(shuō)前一個(gè)Route也能產(chǎn)生一個(gè)_kMiddleLeftTween動(dòng)畫；

概括：

新加的Route通過(guò)animation驅(qū)動(dòng)從屏幕右邊移動(dòng)到左邊的動(dòng)畫，animation賦值給了前一個(gè)Route的secondaryAnimation驅(qū)動(dòng)前一個(gè)Route向左移動(dòng)1/3個(gè)屏幕位置。

push的邏輯類似，只是一個(gè)反向的動(dòng)畫reverse。前一個(gè)Route在secondaryAnimation的驅(qū)動(dòng)下右移了1/3屏幕寬度，當(dāng)前的Route在animation驅(qū)動(dòng)下移出屏幕。

我們可以點(diǎn)擊Flutter DevTools的Slow Animations看看動(dòng)畫的慢放過(guò)程：

動(dòng)畫

階段總結(jié)

總結(jié)

_RouteEntry

Navigator不是直接操作的Route，而是Route的封裝類_RouteEntry。

_RouteEntry(
    this.route, 
    {
      required _RouteLifecycle initialState,
      this.restorationInformation,
    })

_RouteEntry除了持有route外，還持有一個(gè)_RouteLifecycle，即路由狀態(tài)。

函數(shù)則主要是修改_RouteLifecycle狀態(tài)的函數(shù)，譬如markForPush,markForAdd,markForPop,markForRemove,markForComplete等。此外還有_RouteLifecycle被標(biāo)記后對(duì)Route進(jìn)行操作函數(shù)，譬如handlePush，handleAdd,handlePop,remove等。

Navigator

Navigator({
    Key? key,
    this.pages = const <Page<dynamic>>[],
    // ...
})

Navigator的構(gòu)造方法中有一個(gè)關(guān)鍵的屬性pages,Navigator會(huì)將傳入的pages會(huì)轉(zhuǎn)換成Routes對(duì)應(yīng)的_RouteEntry數(shù)組。

實(shí)現(xiàn)申明式編程的邏輯就是修改這個(gè)pages中的內(nèi)容，Navigator會(huì)自動(dòng)實(shí)現(xiàn)對(duì)應(yīng)的跳轉(zhuǎn)，返回，替換等操作。Navigator.push,Navigator.pop等以前使用的方法就被將不是開(kāi)發(fā)者需要考慮的使用方法了。

我們接下來(lái)分析NavigatorState的重要代碼。

class NavigatorState extends State<Navigator> with TickerProviderStateMixin, RestorationMixin {
    
    List<_RouteEntry> _history = <_RouteEntry>[];
    
    late GlobalKey<OverlayState> _overlayKey;
    OverlayState? get overlay => _overlayKey.currentState;
    
    final FocusScopeNode focusScopeNode = FocusScopeNode(debugLabel: 'Navigator Scope');
    
}

1. _history就是pages中每個(gè)Page通過(guò)createRoute生成的_RouteEntry數(shù)組；
2. OverlayStateoverlay代表的就是OverLay，它負(fù)責(zé)擺放每個(gè)Route的overlayEntries數(shù)組；OverLay就相當(dāng)于一個(gè)Stack，專門用于放置OverlayEntry。

NavigatorState的核心方法是didUpdateWidget方法, 其調(diào)用了一個(gè)_updatePages()方法：

void didUpdateWidget(Navigator oldWidget) {
    _updatePages();
}

_updatePages方法的主要作用是對(duì)pages進(jìn)行diff比對(duì)，更新_history數(shù)組中每個(gè)_routeEntry的_RouteLifecycle, 最后調(diào)用_flushHistoryUpdates()方法。

_routeEntry比對(duì)的方法和MultiChildRenderObjectElement的比對(duì)方法是一樣的，先前往后比對(duì)能復(fù)用的元素，然后從后往前比對(duì)能復(fù)用的元素，然后對(duì)剩下的元素進(jìn)行復(fù)用或者新建，不能復(fù)用的元素進(jìn)行銷毀。

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
    final List<_RouteEntry> toBeDisposed = <_RouteEntry>[];
    while (index >= 0) {
      switch (entry!.currentState) {
        case _RouteLifecycle.push:
        case _RouteLifecycle.pushReplace:
        case _RouteLifecycle.replace:
          entry.handlePush(
            navigator: this,
            previous: previous?.route,
            previousPresent: _getRouteBefore(index - 1, _RouteEntry.isPresentPredicate)?.route,
            isNewFirst: next == null,
          );
          if (entry.currentState == _RouteLifecycle.idle) {
            continue;
          }
          break;
        // ...
      }
      index -= 1;
      next = entry;
      entry = previous;
      previous = index > 0 ? _history[index - 1] : null;
    }

    _flushObserverNotifications();

    _flushRouteAnnouncement();

    for (final _RouteEntry entry in toBeDisposed) {
      for (final OverlayEntry overlayEntry in entry.route.overlayEntries)
        overlayEntry.remove();
      entry.dispose();
    }
    
    if (rearrangeOverlay) {
      overlay?.rearrange(_allRouteOverlayEntries);
    }
}

1. 根據(jù)每個(gè)_RouteEntry的_RouteLifecycle調(diào)用對(duì)應(yīng)的方法，例如如果Route被標(biāo)記為_RouteLifecycle.push,則調(diào)用handlePush方法，這樣此Route就會(huì)調(diào)用install方法插入Navigator的樹(shù)中，然后進(jìn)行動(dòng)畫；
2. _flushObserverNotifications是對(duì)每個(gè)_NavigatorObservation監(jiān)聽(tīng)者進(jìn)行通知；
3. _flushRouteAnnouncement主要是對(duì)每個(gè)Route的前后關(guān)系進(jìn)行梳理更新，secondaryAnimation的更新就是這個(gè)時(shí)候進(jìn)行的；
4. 將不需要的_RouteEntry的overlayEntries從Overlay上移除，因?yàn)椴恍枰亠@示了；
5. 然后將所有的_RouteEntry的overlayEntries更新到Overlay上,代碼在build方法中可以看到添加的邏輯如下。

Widget build(BuildContext context) {
    return HeroControllerScope.none(
      child: 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: UnmanagedRestorationScope(
              bucket: bucket,
              child: Overlay(
                key: _overlayKey,
                initialEntries: overlay == null ?  _allRouteOverlayEntries.toList(growable: false) : const <OverlayEntry>[],
              ),
            ),
          ),
        ),
      ),
    );
  }

順便提一下HeroControllerScope是負(fù)責(zé)進(jìn)行Hero動(dòng)畫的的Widget，類似于Android中的共享元素動(dòng)畫。

階段總結(jié)

階段總結(jié)

到目前為止，我們通過(guò)切換Navigator的page就能夠?qū)崿F(xiàn)路由切換了，是不是文章就結(jié)束了？沒(méi)有，因?yàn)镹avigator 2.0是為Flutter 2.0 的全平臺(tái)而生的，目前還沒(méi)有解決一些問(wèn)題，例如編輯瀏覽器網(wǎng)址，網(wǎng)頁(yè)返回，安卓物理鍵返回等功能。

Router

Router({
    Key? key,
    this.routeInformationProvider,
    this.routeInformationParser,
    required this.routerDelegate,
    this.backButtonDispatcher,
  })
  
final RouteInformationProvider? routeInformationProvider;
final RouteInformationParser<T>? routeInformationParser;
final RouterDelegate<T> routerDelegate;
final BackButtonDispatcher? backButtonDispatcher;

我們看到Router有四個(gè)屬性，RouteInformationProvider路由信息提供者，RouteInformationParser路由信息解析者，RouterDelegate路由信息的處理代理，BackButtonDispatcher返回處理的分發(fā)者。他們四個(gè)協(xié)同作用，共同實(shí)現(xiàn)路由的功能。

RouteInformation

上面說(shuō)的到路由信息就是指RouteInformation，包括路由的路徑location和路由對(duì)應(yīng)的狀態(tài)state。這里所指的狀態(tài)就是數(shù)據(jù)。

class RouteInformation {

  final String? location;
  final Object? state;
}

RouteInformationProvider

RouteInformationProvider只有一個(gè)抽象方法routerReportsNewRouteInformation，這個(gè)方法的作用是根據(jù)RouteInformation進(jìn)行一些額外的操作。

abstract class RouteInformationProvider extends ValueListenable<RouteInformation?> {
  void routerReportsNewRouteInformation(RouteInformation routeInformation) {}
}

系統(tǒng)默認(rèn)使用的是PlatformRouteInformationProvider, 它的routerReportsNewRouteInformation方法中回調(diào)了系統(tǒng)路由的更新，例如瀏覽器就會(huì)在History棧中新增一條歷史訪問(wèn)記錄:

class PlatformRouteInformationProvider extends RouteInformationProvider with WidgetsBindingObserver, ChangeNotifier {

    void routerReportsNewRouteInformation(RouteInformation routeInformation) {
        SystemNavigator.routeInformationUpdated(
          location: routeInformation.location!,
          state: routeInformation.state,
        );
        _value = routeInformation;
    }

}

RouteInformationParser

這個(gè)類的作用是對(duì)T頁(yè)面模型和RouteInformation路由信息進(jìn)行相互轉(zhuǎn)換：

abstract class RouteInformationParser<T> {
  
  Future<T> parseRouteInformation(RouteInformation routeInformation);

  RouteInformation? restoreRouteInformation(T configuration) => null;
}

parseRouteInformation這個(gè)方法主要是解析初始路由的時(shí)候會(huì)使用到，例如 根據(jù)RouteInformation(location: "/")顯示啟動(dòng)頁(yè)面；

restoreRouteInformation這個(gè)方法就是根據(jù)T頁(yè)面模型生成對(duì)應(yīng)的RouteInformation。

RouterDelegate

RouterDelegate顧名思義就是代替Router工作的類，它包括根據(jù)T頁(yè)面模型添加一個(gè)頁(yè)面，pop一個(gè)頁(yè)面，提供構(gòu)建的內(nèi)容等。

abstract class RouterDelegate<T> extends Listenable {
  
  Future<void> setInitialRoutePath(T configuration) {
    return setNewRoutePath(configuration);
  }

  Future<void> setNewRoutePath(T configuration);

  Future<bool> popRoute();

  T? get currentConfiguration => null;

  Widget build(BuildContext context);
}

可以混入PopNavigatorRouterDelegateMixin的popRoute方法，就不用自己去實(shí)現(xiàn)了。

我們從源碼角度看看RouteInformationProvider，RouteInformationParser和RouterDelegate他們?nèi)咴诔跏蓟酚墒侨绾螌?shí)現(xiàn)的：

class _RouterState<T> extends State<Router<T>> {

  void initState() {
    super.initState();
    if (widget.routeInformationProvider != null) {
      _processInitialRoute();
    }
  }

  void _processInitialRoute() {
    _currentRouteInformationParserTransaction = Object();
    _currentRouterDelegateTransaction = Object();
    _lastSeenLocation = widget.routeInformationProvider!.value!.location;
    widget.routeInformationParser!
      .parseRouteInformation(widget.routeInformationProvider!.value!)
      .then<T>(_verifyRouteInformationParserStillCurrent(_currentRouteInformationParserTransaction, widget))
      .then<void>(widget.routerDelegate.setInitialRoutePath)
      .then<void>(_verifyRouterDelegatePushStillCurrent(_currentRouterDelegateTransaction, widget))
      .then<void>(_rebuild);
  }    
    
}

在_processInitialRoute方法中我們看到了，routeInformationParser解析routeInformationProvider的value，然后routerDelegate根據(jù)這個(gè)解析的結(jié)果去調(diào)用setNewRoutePath設(shè)置路由。

routeInformationProvider -> routeInformationParser -> routerDelegate -> (setNewRoutePath)

RouterDelegate的覆寫案例：

class MyRouterDelegate extends RouterDelegate<PageConfiguration>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<PageConfiguration> {
    
    final List<Page> _pages = [];
    
    final AppState appState;
    final GlobalKey<NavigatorState> navigatorKey;
    
    MyRouterDelegate(this.appState) : navigatorKey = GlobalKey() {
        appState.addListener(() {
          notifyListeners();
        });
    }

    List<MaterialPage> get pages => List.unmodifiable(_pages);
        
    
    Future<bool> popRoute() {
        _removePage(_pages.last);
        return Future.value(false);
    }
    
    Future<void> setNewRoutePath(PageConfiguration configuration) {
        if (shouldAddPage) {
          _pages.clear();
          addPage(configuration);
        }
        return SynchronousFuture(null);
    }
        
    Widget build(BuildContext context) {
        return Navigator(
          key: navigatorKey,
          onPopPage: _onPopPage,
          pages: buildPages(),
        );
    }
    
}

1. MyRouterDelegate有_pages屬性，這個(gè)屬性作為Navigator的pages；appState是狀態(tài)管理的數(shù)據(jù)，用這個(gè)數(shù)據(jù)去驅(qū)動(dòng)MyRouterDelegate的觀察者也就是Router即去重構(gòu)，這樣Navigator也就會(huì)重構(gòu)了。
2. popRoute將_pages的最后一個(gè)頁(yè)面刪掉，通知Router即去重構(gòu)，更新Navigator；
3. setNewRoutePath給_pages添加對(duì)應(yīng)的Page，通知Router即去重構(gòu)Navigator。

BackButtonDispatcher

BackButtonDispatcher主要就是解決安卓，網(wǎng)頁(yè)等物理返回的事件。它有兩個(gè)子類RootBackButtonDispatcher和ChildBackButtonDispatcher可以解決Router的嵌套問(wèn)題。

BackButtonDispatcher的返回處理可以直接交給RouterDelegate去處理，例如下面的邏輯：

class MyBackButtonDispatcher extends RootBackButtonDispatcher {

  final MyRouterDelegate _routerDelegate;

  MyBackButtonDispatcher(this._routerDelegate)
      : super();

  // 3
  @override
  Future<bool> didPopRoute() {
    return _routerDelegate.popRoute();
  }

}

最后總結(jié)

最后總結(jié)

總結(jié)

Navigator 2.0的功能更加強(qiáng)大了，使用方式也變得更加Flutter了。但是變得更復(fù)雜了，這樣對(duì)學(xué)習(xí)和使用成本造成了很大的困擾，這方面也是很多人認(rèn)為Navigator 2.0是一個(gè)失敗的改造的原因。

本文主要從源碼角度分析了Navigator 2.0的實(shí)現(xiàn)邏輯，原理清楚后寫代碼應(yīng)該還是很簡(jiǎn)單的。

如果你需要Demo，可以參閱下面兩篇文章的代碼，特別是第一篇文章的代碼非常具有參考價(jià)值：

Flutter Navigator 2.0 and Deep Links

Learning Flutter’s new navigation and routing system