亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

flutter 路由機(jī)制的實(shí)現(xiàn)

 更新時(shí)間:2021年07月13日 10:35:41   作者:無(wú)若葉  
本文主要介紹 flutter 中的路由實(shí)現(xiàn)原理,包括初始化時(shí)的頁(yè)面加載、切換頁(yè)面的底層機(jī)制等。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

整個(gè) flutter 應(yīng)用的運(yùn)行都只是基于原生應(yīng)用中的一個(gè) view,比如 android 中的 FlutterView,flutter 中的頁(yè)面切換依賴于它的路由機(jī)制,也就是以 Navigator 為中心的一套路由功能,使得它能夠完成與原生類似且能夠自定義的頁(yè)面切換效果。

下面將介紹 flutter 中的路由實(shí)現(xiàn)原理,包括初始化時(shí)的頁(yè)面加載、切換頁(yè)面的底層機(jī)制等。

實(shí)現(xiàn)基礎(chǔ)

flutter 應(yīng)用的運(yùn)行需要依賴 MaterialApp/CupertinoApp 這兩個(gè) Widget,他們分別對(duì)應(yīng)著 android/ios 的設(shè)計(jì)風(fēng)格,同時(shí)也為應(yīng)用的運(yùn)行提供了一些基本的設(shè)施,比如與路由相關(guān)的主頁(yè)面、路由表等,再比如跟整體頁(yè)面展示相關(guān)的 theme、locale 等。

其中與路由相關(guān)的幾項(xiàng)配置有 home、routes、initialRoute、onGenerateRoute、onUnknownRoute,它們分別對(duì)應(yīng)著主頁(yè)面 widget、路由表(根據(jù)路由找到對(duì)應(yīng) widget)、首次加載時(shí)的路由、路由生成器、未知路由代理(比如常見(jiàn)的 404 頁(yè)面)。

MaterialApp/CupertinoApp 的子結(jié)點(diǎn)都是 WidgetsApp,只不過(guò)他們給 WidgetsApp 傳入了不同的參數(shù),從而使得兩種 Widget 的界面風(fēng)格不一致。Navigator 就是在 WidgetsApp 中創(chuàng)建的,

Widget build(BuildContext context) {
  Widget navigator;
    if (_navigator != null) {
    navigator = Navigator(
      key: _navigator,
      // If window.defaultRouteName isn't '/', we should assume it was set
      // intentionally via `setInitialRoute`, and should override whatever
      // is in [widget.initialRoute].
      initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
          ? WidgetsBinding.instance.window.defaultRouteName
          : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
      onGenerateRoute: _onGenerateRoute,
      onGenerateInitialRoutes: widget.onGenerateInitialRoutes == null
        ? Navigator.defaultGenerateInitialRoutes
        : (NavigatorState navigator, String initialRouteName) {
          return widget.onGenerateInitialRoutes(initialRouteName);
        },
      onUnknownRoute: _onUnknownRoute,
      observers: widget.navigatorObservers,
    );
  }
  ...
}

在 WidgetsApp 的 build 中第一個(gè)創(chuàng)建的就是 Navigator,主要看一下它的參數(shù),首先,_navigator 是一個(gè) GlobalKey,使得 WidgetsApp 可以通過(guò) key 調(diào)用 Navigator 的函數(shù)進(jìn)行路由切換,也就是在 WidgetsBinding 中處理 native 的路由切換信息的時(shí)候,最終是由 WidgetsApp 完成的。另外這里的 _navigator 應(yīng)該只在 WidgetsApp 中有使用,其他地方需要使用一般是直接調(diào)用 Navigator.of 獲取,這個(gè)函數(shù)會(huì)沿著 element 樹(shù)向上查找到 NavigatorState,所以在應(yīng)用中切換路由是需要被 Navigator 包裹的,不過(guò)由于 WidgetsApp 中都有生成 Navigator,開(kāi)發(fā)中也不必考慮這些。

另外,就是關(guān)于底層獲取上層 NavigatorElement 實(shí)例的方式,在 Element 樹(shù)中有兩種方式可以從底層獲取到上層的實(shí)例,一種方式是使用 InheritedWidget,另一種就是直接沿著樹(shù)向上查找(ancestorXXXOfExactType 系列),兩種方式的原理基本是一致的,只不過(guò) InheritedWidget 在建立樹(shù)的過(guò)程中會(huì)一層層向下傳遞,而后者是使用的時(shí)候才向上查找,所以從這個(gè)角度來(lái)說(shuō)使用 InheritedWidget 會(huì)高效些,但是 InheritedWidget 的優(yōu)勢(shì)不止如此,它是能夠在數(shù)據(jù)發(fā)生改變的時(shí)候通知所有依賴它的結(jié)點(diǎn)進(jìn)行更新,這也是 ancestorXXXOfExactType 系列所沒(méi)有的。

然后 initialRoute 規(guī)定了初始化時(shí)候的頁(yè)面,由 WidgetsBinding.instance.window.defaultRouteName 和 widget.initialRoute 來(lái)決定,不過(guò)前者優(yōu)先級(jí)更高,因?yàn)檫@個(gè)是 native 中指定的,以 android 為例,在啟動(dòng) FlutterActivity 的時(shí)候可以傳入 route 字段指定初始化頁(yè)面。

onGenerateRoute 和 onUnknownRoute 是獲取 route 的策略,當(dāng) onGenerateRoute 沒(méi)有命中時(shí)會(huì)調(diào)用 onUnknownRoute 給定一個(gè)默認(rèn)的頁(yè)面,onGenerateInitialRoutes 用于生產(chǎn)啟動(dòng)應(yīng)用時(shí)的路由列表,它有一個(gè)默認(rèn)實(shí)現(xiàn) defaultGenerateInitialRoutes,會(huì)根據(jù)傳遞的 initialRouteName 選擇不同的 Route,如果傳入的 initialRouteName 并不是默認(rèn)的主頁(yè)面路由 Navigator.defaultRouteName,flutter 并不會(huì)將 initRoute 作為主頁(yè)面,而是將默認(rèn)路由入棧了之后再入棧 initRoute 對(duì)應(yīng)的頁(yè)面,所以如果在這之后再調(diào)用 popRoute,是會(huì)返回到主頁(yè)面的

observers 是路由切換的監(jiān)聽(tīng)列表,可以由外部傳入,在路由切換的時(shí)候做些操作,比如 HeroController 就是一個(gè)監(jiān)聽(tīng)者。
Navigator 是一個(gè) StatefulWidget,在 NavigatorState 的 initState 中完成了將 initRoute 轉(zhuǎn)換成 Route 的過(guò)程,并調(diào)用 push 將其入棧,生成 OverlayEntry,這個(gè)會(huì)繼續(xù)傳遞給下層負(fù)責(zé)顯示頁(yè)面的 Overlay 負(fù)責(zé)展示。

在 push 的過(guò)程中,route 會(huì)被轉(zhuǎn)換成 OverlayEntry 列表存放,每一個(gè) OverlayEntry 中存儲(chǔ)一個(gè) WidgetBuilder,從某種角度來(lái)說(shuō),OverlayEntry 可以被認(rèn)為是一個(gè)頁(yè)面。所有的頁(yè)面的協(xié)調(diào)、展示是通過(guò) Overlay 完成的,Overlay 是一個(gè)類似于 Stack 的結(jié)構(gòu),它可以展示多個(gè)子結(jié)點(diǎn)。在它的 initState 中,

void initState() {
  super.initState();
  insertAll(widget.initialEntries);
}

會(huì)將 initialEntries 都存到 _entries 中。

Overlay 作為一個(gè)能夠根據(jù)路由確定展示頁(yè)面的控件,它的實(shí)現(xiàn)其實(shí)比較簡(jiǎn)單:

Widget build(BuildContext context) {
  // These lists are filled backwards. For the offstage children that
  // does not matter since they aren't rendered, but for the onstage
  // children we reverse the list below before adding it to the tree.
  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,
  );
}

build 函數(shù)中,將所有的 OverlayEntry 分成了可見(jiàn)與不可見(jiàn)兩部分,每一個(gè) OverlayEntry 生成一個(gè) _OverlayEntry,這是一個(gè) StatefulWidget,它的作用主要是負(fù)責(zé)控制當(dāng)前頁(yè)重繪,都被封裝成 然后再用  _Theatre 展示就完了,在 _Theatre 中,可見(jiàn)/不可見(jiàn)的子結(jié)點(diǎn)都會(huì)轉(zhuǎn)成 Element,但是在繪制的時(shí)候,_Theatre 對(duì)應(yīng)的 _RenderTheatre 只會(huì)把可見(jiàn)的子結(jié)點(diǎn)繪制出來(lái)。

判斷某一個(gè) OverlayEntry 是否能夠完全遮擋上一個(gè) OverlayEntry 是通過(guò)它的 opaque 變量判斷的,而 opaque 又是由 Route 給出的,在頁(yè)面動(dòng)畫執(zhí)行時(shí),這個(gè)值會(huì)被設(shè)置成 false,然后在頁(yè)面切換動(dòng)畫執(zhí)行完了之后就會(huì)把 Route 的 opaque 參數(shù)賦值給它的 OverlayEntry,一般情況下,窗口對(duì)應(yīng)的 Route 為 false,頁(yè)面對(duì)應(yīng)的 Route 為 true。

所以說(shuō)在頁(yè)面切換之后,上一個(gè)頁(yè)面始終都是存在于 element 樹(shù)中的,只不過(guò)在 RenderObject 中沒(méi)有將其繪制出來(lái),這一點(diǎn)在 Flutter Outline 工具里面也能夠體現(xiàn)。從這個(gè)角度也可以理解為,在 flutter 中頁(yè)面越多,需要處理的步驟就越多,雖然不需要繪制底部的頁(yè)面,但是整個(gè)樹(shù)的基本遍歷還是會(huì)有的,這部分也算是開(kāi)銷。

_routeNamed

flutter 中進(jìn)行頁(yè)面管理主要的依賴路由管理系統(tǒng),它的入口就是 Navigator,它所管理的東西,本質(zhì)上就是承載著用戶頁(yè)面的 Route,但是在 Navigator 中有很多函數(shù)是 XXXName 系列的,它們傳的不是 Route,而是 RouteName,據(jù)個(gè)人理解,這個(gè)主要是方便開(kāi)發(fā)引入的,我們可以在 MaterialApp/CupertinoApp 中直接傳入路由表,每一個(gè)名字對(duì)應(yīng)一個(gè) WidgetBuilder,然后結(jié)合 pageRouteBuilder(這個(gè)可以自定義,不過(guò) MaterialApp/CupertinoApp 都有默認(rèn)實(shí)現(xiàn),能夠?qū)?WidgetBuilder 轉(zhuǎn)成 Route),便可以實(shí)現(xiàn)從 RouteName 到 Route 的轉(zhuǎn)換。

Route<T> _routeNamed<T>(String name, { @required Object arguments, bool allowNull = false }) {
  if (allowNull && widget.onGenerateRoute == null)
    return null;
  final RouteSettings settings = RouteSettings(
    name: name,
    arguments: arguments,
  );
  Route<T> route = widget.onGenerateRoute(settings) as Route<T>;
  if (route == null && !allowNull) {
    route = widget.onUnknownRoute(settings) as Route<T>;
  }
  return route;
}

這個(gè)過(guò)程分三步,生成 RouteSettings,調(diào)用 onGenerateRoute 從路由表中拿到對(duì)應(yīng)的路由,如果無(wú)命中,就調(diào)用 onUnknownRoute 給一個(gè)類似于 404 頁(yè)面的東西。

onGenerateRoute 和 onUnknownRoute 在構(gòu)建 Navigator 時(shí)傳入,在 WidgetsApp 中實(shí)現(xiàn),

Route<dynamic> _onGenerateRoute(RouteSettings settings) {
  final String name = settings.name;
  final WidgetBuilder pageContentBuilder = name == Navigator.defaultRouteName && widget.home != null
      ? (BuildContext context) => widget.home
      : widget.routes[name];
  if (pageContentBuilder != null) {
    final Route<dynamic> route = widget.pageRouteBuilder<dynamic>(
      settings,
      pageContentBuilder,
    );
    return route;
  }
  if (widget.onGenerateRoute != null)
    return widget.onGenerateRoute(settings);
  return null;
}

如果是默認(rèn)的路由會(huì)直接使用給定的 home 頁(yè)面(如果有),否則就直接到路由表查,所以本質(zhì)上這里的 home 頁(yè)面更多的是一種象征,身份的象征,沒(méi)有也無(wú)所謂。另外路由表主要的產(chǎn)出是 WidgetBuilder,它需要經(jīng)過(guò)一次包裝,成為 Route 才是成品,或者如果不想使用路由表這種,也可以直接實(shí)現(xiàn) onGenerateRoute 函數(shù),根據(jù) RouteSetting 直接生成 Route,這個(gè)就不僅僅是返回 WidgetBuilder 這么簡(jiǎn)單了,需要自己包裝。

onUnknownRoute 主要用于兜底,提供一個(gè)類似于 404 的頁(yè)面,它也是需要直接返回 Route。

_flushHistoryUpdates

不知道從哪一個(gè)版本開(kāi)始,flutter 的路由管理引入了狀態(tài),與之前每一個(gè) push、pop 都單獨(dú)實(shí)現(xiàn)不同,所有的路由切換操作都是用狀態(tài)表示,同時(shí)所有的 route 都被封裝成 _RouteEntry,它內(nèi)部有著關(guān)于 Route 操作的實(shí)現(xiàn),但都被劃分為比較小的單元,且都依靠狀態(tài)來(lái)執(zhí)行。

狀態(tài)是一個(gè)具有遞進(jìn)關(guān)系的枚舉,每一個(gè) _RouteEntry 都有一個(gè)變量存放當(dāng)前的狀態(tài),在 _flushHistoryUpdates 中會(huì)遍歷所有的 _RouteEntry 然后根據(jù)它們當(dāng)前的狀態(tài)進(jìn)行處理,同時(shí)處理完成之后會(huì)切換它們的狀態(tài),再進(jìn)行其他處理,這樣的好處很明顯,所有的路由都放在一起處理之后,整個(gè)流程會(huì)變得更加清晰,且能夠很大程度上進(jìn)行代碼復(fù)用,比如 push 和 pushReplacement 兩種操作,這在之前是需要在兩個(gè)方法中單獨(dú)實(shí)現(xiàn)的,而現(xiàn)在他們則可以放在一起單獨(dú)處理,不同的只有后者比前者會(huì)多一個(gè) remove 的操作。

關(guān)于 _flushHistoryUpdates 的處理步驟:

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  assert(_debugLocked && !_debugUpdatingPage);
  // Clean up the list, sending updates to the routes that changed. Notably,
  // we don't send the didChangePrevious/didChangeNext updates to those that
  // did not change at this point, because we're not yet sure exactly what the
  // routes will be at the end of the day (some might get disposed).
  int index = _history.length - 1;
  _RouteEntry next;
  _RouteEntry entry = _history[index];
  _RouteEntry previous = index > 0 ? _history[index - 1] : null;
  bool canRemoveOrAdd = false; // Whether there is a fully opaque route on top to silently remove or add route underneath.
  Route<dynamic> poppedRoute; // The route that should trigger didPopNext on the top active route.
  bool seenTopActiveRoute = false; // Whether we've seen the route that would get didPopNext.
  final List<_RouteEntry> toBeDisposed = <_RouteEntry>[];
  while (index >= 0) {
    switch (entry.currentState) {
        // ...
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  // Now that the list is clean, send the didChangeNext/didChangePrevious
  // notifications.
  _flushRouteAnnouncement();
  // Announces route name changes.
  final _RouteEntry lastEntry = _history.lastWhere(_RouteEntry.isPresentPredicate, orElse: () => null);
  final String routeName = lastEntry?.route?.settings?.name;
  if (routeName != _lastAnnouncedRouteName) {
    RouteNotificationMessages.maybeNotifyRouteChange(routeName, _lastAnnouncedRouteName);
    _lastAnnouncedRouteName = routeName;
  }
  // Lastly, removes the overlay entries of all marked entries and disposes
  // them.
  for (final _RouteEntry entry in toBeDisposed) {
    for (final OverlayEntry overlayEntry in entry.route.overlayEntries)
      overlayEntry.remove();
    entry.dispose();
  }
  if (rearrangeOverlay)
    overlay?.rearrange(_allRouteOverlayEntries);
}

以上是除了狀態(tài)處理之外,一次 _flushHistoryUpdates 的全過(guò)程,首先它會(huì)遍歷整個(gè)路由列表,根據(jù)狀態(tài)做不同的處理,不過(guò)一般能夠處理到的也不過(guò)最上層一兩個(gè),其余的多半是直接跳過(guò)的。處理完了之后,調(diào)用 _flushRouteAnnouncement 進(jìn)行路由之間的前后鏈接,比如進(jìn)行動(dòng)畫的聯(lián)動(dòng)等,

void _flushRouteAnnouncement() {
  int index = _history.length - 1;
  while (index >= 0) {
    final _RouteEntry entry = _history[index];
    if (!entry.suitableForAnnouncement) {
      index -= 1;
      continue;
    }
    final _RouteEntry next = _getRouteAfter(index + 1, _RouteEntry.suitableForTransitionAnimationPredicate);
    if (next?.route != entry.lastAnnouncedNextRoute) {
      if (entry.shouldAnnounceChangeToNext(next?.route)) {
        entry.route.didChangeNext(next?.route);
      }
      entry.lastAnnouncedNextRoute = next?.route;
    }
    final _RouteEntry previous = _getRouteBefore(index - 1, _RouteEntry.suitableForTransitionAnimationPredicate);
    if (previous?.route != entry.lastAnnouncedPreviousRoute) {
      entry.route.didChangePrevious(previous?.route);
      entry.lastAnnouncedPreviousRoute = previous?.route;
    }
    index -= 1;
  }
}

其實(shí)現(xiàn)也比較清晰,對(duì)每一個(gè) _RouteEntry,通過(guò)調(diào)用 didChangeNext 和 didChangePrevious 來(lái)建立聯(lián)系,比如在 didChangeNext 中綁定當(dāng)前 Route 的 secondaryAnimation 和下一個(gè)路由的 animation 進(jìn)行動(dòng)畫聯(lián)動(dòng),再比如在 didChangePrevious 中獲取上一個(gè)路由的 title,這個(gè)可以用于 CupertinoNavigationBar 中 back 按鈕展示上一頁(yè)面的 title。
然后調(diào)用 maybeNotifyRouteChange 發(fā)出通知,指定當(dāng)前正在處于展示狀態(tài)的 Route。

最后,遍歷 toBeDisposed 執(zhí)行 _RouteEntry 的銷毀,這個(gè)列表會(huì)保存上面循環(huán)處理過(guò)程中,確定需要移出的 _RouteEntry,通過(guò)調(diào)用 OverlayEntry remove 函數(shù)(它會(huì)將自己從 Overlay 中移除)和 OverlayEntry dispose 函數(shù)(它會(huì)調(diào)用 Route 的 dispose,進(jìn)行資源釋放,比如 TransitionRoute 中 AnimationController 銷毀)。

最后再看關(guān)于狀態(tài)的處理,以下是所有的狀態(tài):

enum _RouteLifecycle {
  staging, // we will wait for transition delegate to decide what to do with this route.
  //
  // routes that are present:
  //
  add, // we'll want to run install, didAdd, etc; a route created by onGenerateInitialRoutes or by the initial widget.pages
  adding, // we'll want to run install, didAdd, etc; a route created by onGenerateInitialRoutes or by the initial widget.pages
  // routes that are ready for transition.
  push, // we'll want to run install, didPush, etc; a route added via push() and friends
  pushReplace, // we'll want to run install, didPush, etc; a route added via pushReplace() and friends
  pushing, // we're waiting for the future from didPush to complete
  replace, // we'll want to run install, didReplace, etc; a route added via replace() and friends
  idle, // route is being harmless
  //
  // routes that are not present:
  //
  // routes that should be included in route announcement and should still listen to transition changes.
  pop, // we'll want to call didPop
  remove, // we'll want to run didReplace/didRemove etc
  // routes should not be included in route announcement but should still listen to transition changes.
  popping, // we're waiting for the route to call finalizeRoute to switch to dispose
  removing, // we are waiting for subsequent routes to be done animating, then will switch to dispose
  // routes that are completely removed from the navigator and overlay.
  dispose, // we will dispose the route momentarily
  disposed, // we have disposed the route
}

本質(zhì)上這些狀態(tài)分為三類,add(處理初始化的時(shí)候直接添加),push(與 add 類似,但是增加了動(dòng)畫的處理),pop(處理頁(yè)面移出),remove(移出某個(gè)頁(yè)面,相對(duì) pop 沒(méi)有動(dòng)畫,也沒(méi)有位置限制)。

add

add 方式添加路由目前還只用于在應(yīng)用初始化是添加初始化頁(yè)面使用,對(duì)應(yīng)的是在 NavigatorState 的 initState 中,

void initState() {
  super.initState();
  for (final NavigatorObserver observer in widget.observers) {
    assert(observer.navigator == null);
    observer._navigator = this;
  }
  String initialRoute = widget.initialRoute;
  if (widget.pages.isNotEmpty) {
    _history.addAll(
      widget.pages.map((Page<dynamic> page) => _RouteEntry(
        page.createRoute(context),
        initialState: _RouteLifecycle.add,
      ))
    );
  } else {
    // If there is no page provided, we will need to provide default route
    // to initialize the navigator.
    initialRoute = initialRoute ?? Navigator.defaultRouteName;
  }
  if (initialRoute != null) {
    _history.addAll(
      widget.onGenerateInitialRoutes(
        this,
        widget.initialRoute ?? Navigator.defaultRouteName
      ).map((Route<dynamic> route) =>
        _RouteEntry(
          route,
          initialState: _RouteLifecycle.add,
        ),
      ),
    );
  }
  _flushHistoryUpdates();
}

它會(huì)將從 onGenerateInitialRoutes 得來(lái)的所有初始路由轉(zhuǎn)成 _RouteEntry 加入到 _history,此時(shí)它們的狀態(tài)是 _RouteLifecycle.add,然后就是調(diào)用 _flushHistoryUpdates 進(jìn)行處理。

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  // ...
  while (index >= 0) {
    switch (entry.currentState) {
      case _RouteLifecycle.add:
        assert(rearrangeOverlay);
        entry.handleAdd(
          navigator: this,
        );
        assert(entry.currentState == _RouteLifecycle.adding);
        continue;
      case _RouteLifecycle.adding:
        if (canRemoveOrAdd || next == null) {
          entry.didAdd(
            navigator: this,
            previous: previous?.route,
            previousPresent: _getRouteBefore(index - 1, _RouteEntry.isPresentPredicate)?.route,
            isNewFirst: next == null
          );
          assert(entry.currentState == _RouteLifecycle.idle);
          continue;
        }
        break;
      case _RouteLifecycle.idle:
        if (!seenTopActiveRoute && poppedRoute != null)
          entry.handleDidPopNext(poppedRoute);
        seenTopActiveRoute = true;
        // This route is idle, so we are allowed to remove subsequent (earlier)
        // routes that are waiting to be removed silently:
        canRemoveOrAdd = true;
        break;
        // ...
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  // ...
}

add 路線主要會(huì)調(diào)用兩個(gè)函數(shù),handleAdd 和 didAdd,

void handleAdd({ @required NavigatorState navigator}) {
  assert(currentState == _RouteLifecycle.add);
  assert(navigator != null);
  assert(navigator._debugLocked);
  assert(route._navigator == null);
  route._navigator = navigator;
  route.install();
  assert(route.overlayEntries.isNotEmpty);
  currentState = _RouteLifecycle.adding;
}

install 函數(shù)可以看作是 Route 的初始化函數(shù),比如在 ModalRoute 中創(chuàng)建 ProxyAnimation 來(lái)管理一些動(dòng)畫的執(zhí)行,在 TransitionRoute 中創(chuàng)建了用于執(zhí)行切換動(dòng)畫的 AnimationController,在 OverlayRoute 中完成了當(dāng)前 Route 的 OverlayEntry 的創(chuàng)建及插入。createOverlayEntries 用于創(chuàng)建 OverlayEntry,其實(shí)現(xiàn)在 ModalRoute,

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

每一個(gè) Route 都能生成兩個(gè) OverlayEntry,一個(gè)是 _buildModalBarrier,它可以生成兩個(gè)頁(yè)面之間的屏障,我們可以利用它給新頁(yè)面設(shè)置一個(gè)背景色,同時(shí)還支持動(dòng)畫過(guò)渡,另一個(gè)是 _buildModalScope,它生成的就是這個(gè)頁(yè)面真正的內(nèi)容,外部會(huì)有多層包裝,最底層就是 WidgetBuilder 創(chuàng)建的 widget。

大致看下兩個(gè)函數(shù)的實(shí)現(xiàn),

Widget _buildModalBarrier(BuildContext context) {
  Widget barrier;
  if (barrierColor != null && !offstage) { // changedInternalState is called if these update
    assert(barrierColor != _kTransparent);
    final Animation<Color> color = animation.drive(
      ColorTween(
        begin: _kTransparent,
        end: barrierColor, // changedInternalState is called if this updates
      ).chain(_easeCurveTween),
    );
    barrier = AnimatedModalBarrier(
      color: color,
      dismissible: barrierDismissible, // changedInternalState is called if this updates
      semanticsLabel: barrierLabel, // changedInternalState is called if this updates
      barrierSemanticsDismissible: semanticsDismissible,
    );
  } else {
    barrier = ModalBarrier(
      dismissible: barrierDismissible, // changedInternalState is called if this updates
      semanticsLabel: barrierLabel, // changedInternalState is called if this updates
      barrierSemanticsDismissible: semanticsDismissible,
    );
  }
  return IgnorePointer(
    ignoring: animation.status == AnimationStatus.reverse || // changedInternalState is called when this updates
              animation.status == AnimationStatus.dismissed, // dismissed is possible when doing a manual pop gesture
    child: barrier,
  );
}

ModalBarrier 是兩個(gè) Route 之間的屏障,它可以通過(guò)顏色、攔截事件來(lái)表示兩個(gè) Route 的隔離,這些都是可以配置的,這里 IgnorePointer 的作用是為了在執(zhí)行切換動(dòng)畫的時(shí)候無(wú)法響應(yīng)時(shí)間。

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

Widget build(BuildContext context) {
  return _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: FocusScope(
          node: focusScopeNode, // immutable
          child: RepaintBoundary(
            child: AnimatedBuilder(
              animation: _listenable, // immutable
              builder: (BuildContext context, Widget child) {
                return widget.route.buildTransitions(
                  context,
                  widget.route.animation,
                  widget.route.secondaryAnimation,
                  IgnorePointer(
                    ignoring: widget.route.animation?.status == AnimationStatus.reverse,
                    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,
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

_ModalScope 需要承載用戶界面的展示,它的 build 函數(shù)可以看到在 widget.route.buildPage 出用戶定義的頁(yè)面之上有很多層,可以一層一層看下大致作用:

  • _ModalScopeStatus,繼承自 InheritedWidget,用于給底層結(jié)點(diǎn)提供數(shù)據(jù)
  • Offstage,可以通過(guò) offstage 變量控制是否繪制
  • PageStorage,它提供了一種存儲(chǔ)策略,也就是 PageStorageBucket,這個(gè)類可以給某一個(gè) BuildContext 綁定特定的數(shù)據(jù),支持寫入和讀取,可用于某一個(gè) widget 的狀態(tài)存儲(chǔ)等
  • FocusScope,用于焦點(diǎn)管理用,一般只有獲取焦點(diǎn)的控件才能接收到按鍵信息等
  • RepaintBoundary,控制重繪范圍,意在減少不必要的重繪
  • AnimatedBuilder,動(dòng)畫控制 Widget,會(huì)根據(jù) animation 進(jìn)行 rebuild
  • widget.route.buildTransitions,它在不同的 Route 中可以有不同的實(shí)現(xiàn),比如 Android 的默認(rèn)實(shí)現(xiàn)是自下向上漸入,ios 的默認(rèn)實(shí)現(xiàn)是自右向左滑動(dòng),另外也可以通過(guò)自定義 Route 或自定義 ThemeData 實(shí)現(xiàn)自定義的切換動(dòng)畫,還有一點(diǎn)需要說(shuō)明,Route 中的動(dòng)畫分為 animation 和 secondaryAnimation,其中 animation 定義了自己 push 時(shí)的動(dòng)畫,secondaryAnimation 定義的是新頁(yè)面 push 時(shí)自己的動(dòng)畫,舉個(gè)例子,在 ios 風(fēng)格中,新頁(yè)面自右向左滑動(dòng),上一個(gè)頁(yè)面也會(huì)滑動(dòng),此時(shí)控制上一個(gè)頁(yè)面滑動(dòng)的動(dòng)畫就是 secondaryAnimation
  • IgnorePointer,同樣是用于頁(yè)面切換動(dòng)畫執(zhí)行中,禁止用戶操作
  • RepaintBoundary,這里的考量應(yīng)該是考慮到上層有一個(gè)動(dòng)畫執(zhí)行,所以這里包一下避免固定內(nèi)容重繪
  • Builder,Builder 的唯一作用應(yīng)該是提供 BuildContext,雖然說(shuō)每一個(gè) build 函數(shù)都有 BuildContext 參數(shù),但這個(gè)是當(dāng)前 Widget 的,而不是直屬上級(jí)的,這可能有點(diǎn)抽象,比如說(shuō)下面的 buildPage 需要使用 BuildContext 作為參數(shù),那么如果它需要使用 context 的 ancestorStateOfType 的話,實(shí)際上就是從 _ModalScopeState 開(kāi)始向上查找,而不是從 Builder 開(kāi)始向上查找
  • widget.route.buildPage,這個(gè)函數(shù)內(nèi)部就是使用 Route 的 WidgetBuilder 創(chuàng)建用戶界面,當(dāng)然不同的 Route 可能還會(huì)在這里再次進(jìn)行包裝

以上就是一個(gè)頁(yè)面中,從 Overlay(說(shuō)是 Overlay 不是那么合理,但是在此先省略中間的 _Theatre 等) 往下的布局嵌套。新的 OverlayEntry 創(chuàng)建完成之后,會(huì)把它們都傳遞到 Overlay 中,且在這個(gè)過(guò)程中會(huì)調(diào)用 Overlay 的 setState 函數(shù),請(qǐng)求重新繪制,在 Overlay 中實(shí)現(xiàn)新舊頁(yè)面的切換。

以上是 install 的整個(gè)過(guò)程,執(zhí)行完了之后把 currentState 置為 adding 返回。

此處有一點(diǎn)需要注意,while 循環(huán)會(huì)自上往下遍歷所有的 _RouteEntry,但是當(dāng)一個(gè)連續(xù)操作尚未完成時(shí),它是不會(huì)去執(zhí)行下一個(gè) _RouteEntry 的,其實(shí)現(xiàn)就在于代碼中的 continue 關(guān)鍵字,這個(gè)關(guān)鍵字會(huì)直接返回執(zhí)行下一次循環(huán),但是并沒(méi)有更新當(dāng)前 _RouteEntry,所以實(shí)際處理的還是同一個(gè)路由,這種一般用于 _RouteEntry 狀態(tài)發(fā)生變化,且需要連續(xù)處理的時(shí)候,所以對(duì)于 add 來(lái)說(shuō),執(zhí)行完了之后會(huì)立刻執(zhí)行 adding 代碼塊,也就是 didAdd,

void didAdd({ @required NavigatorState navigator, @required bool isNewFirst, @required Route<dynamic> previous, @required Route<dynamic> previousPresent }) {
  route.didAdd();
  currentState = _RouteLifecycle.idle;
  if (isNewFirst) {
    route.didChangeNext(null);
  }
  for (final NavigatorObserver observer in navigator.widget.observers)
    observer.didPush(route, previousPresent);
}

Route 的 didAdd 函數(shù)表示這個(gè)路由已經(jīng)添加完成,它會(huì)做一些收尾處理,比如在 TransitionRoute 中更新 AnimationController 的值到最大,并設(shè)置透明等。然后 didAdd 將狀態(tài)置為 idle,并調(diào)用所有監(jiān)聽(tīng)者的 didPush。idle 表示一個(gè) _RouteEntry 已經(jīng)處理完畢,后續(xù)只有 pop、replace 等操作才會(huì)需要重新處理,add 過(guò)程到這里也可以結(jié)束了。

push

Future<T> push<T extends Object>(Route<T> route) {
  assert(!_debugLocked);
  assert(() {
    _debugLocked = true;
    return true;
  }());
  assert(route != null);
  assert(route._navigator == null);
  _history.add(_RouteEntry(route, initialState: _RouteLifecycle.push));
  _flushHistoryUpdates();
  assert(() {
    _debugLocked = false;
    return true;
  }());
  _afterNavigation(route);
  return route.popped;
}

push 過(guò)程就是將 Route 封裝成 _RouteEntry 加入到 _history 中并調(diào)用 _flushHistoryUpdates,它的初始狀態(tài)時(shí) push,并在最后返回 route.popped,這是一個(gè) Future 對(duì)象,可以用于前一個(gè)頁(yè)面接收新的頁(yè)面的返回結(jié)果,這個(gè)值是在當(dāng)前路由 pop 的時(shí)候傳遞的。

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  // ...
  while (index >= 0) {
    switch (entry.currentState) {
      // ...
      case _RouteLifecycle.push:
      case _RouteLifecycle.pushReplace:
      case _RouteLifecycle.replace:
        assert(rearrangeOverlay);
        entry.handlePush(
          navigator: this,
          previous: previous?.route,
          previousPresent: _getRouteBefore(index - 1, _RouteEntry.isPresentPredicate)?.route,
          isNewFirst: next == null,
        );
        assert(entry.currentState != _RouteLifecycle.push);
        assert(entry.currentState != _RouteLifecycle.pushReplace);
        assert(entry.currentState != _RouteLifecycle.replace);
        if (entry.currentState == _RouteLifecycle.idle) {
          continue;
        }
        break;
      case _RouteLifecycle.pushing: // Will exit this state when animation completes.
        if (!seenTopActiveRoute && poppedRoute != null)
          entry.handleDidPopNext(poppedRoute);
        seenTopActiveRoute = true;
        break;
      case _RouteLifecycle.idle:
        if (!seenTopActiveRoute && poppedRoute != null)
          entry.handleDidPopNext(poppedRoute);
        seenTopActiveRoute = true;
        // This route is idle, so we are allowed to remove subsequent (earlier)
        // routes that are waiting to be removed silently:
        canRemoveOrAdd = true;
        break;
      // ...
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  // ...
}

這里將 push、pushReplace、replace 都?xì)w為了一類,它會(huì)先調(diào)用 handlePush,這個(gè)函數(shù)中其實(shí)包含了 add 過(guò)程中的 handleAdd、didAdd 兩個(gè)函數(shù)的功能,比如調(diào)用 install、調(diào)用 didPush,不同的是,push/pushReplace 會(huì)有一個(gè)過(guò)渡的過(guò)程,即先執(zhí)行切換動(dòng)畫,此時(shí)它的狀態(tài)會(huì)變?yōu)?pushing,并在動(dòng)畫執(zhí)行完時(shí)切到 idle 狀態(tài)并調(diào)用 _flushHistoryUpdates 更新,而 replace 則直接調(diào)用 didReplace 完成頁(yè)面替換,從這里看,這個(gè)應(yīng)該是沒(méi)有動(dòng)畫過(guò)渡的。后面還是一樣,調(diào)用通知函數(shù)。

pop

pop 的過(guò)程與上面兩個(gè)不太一樣,它在 NavigatorState.pop 中也有一些操作:

void pop<T extends Object>([ T result ]) {
  assert(!_debugLocked);
  assert(() {
    _debugLocked = true;
    return true;
  }());
  final _RouteEntry entry = _history.lastWhere(_RouteEntry.isPresentPredicate);
  if (entry.hasPage) {
    if (widget.onPopPage(entry.route, result))
      entry.currentState = _RouteLifecycle.pop;
  } else {
    entry.pop<T>(result);
  }
  if (entry.currentState == _RouteLifecycle.pop) {
    // Flush the history if the route actually wants to be popped (the pop
    // wasn't handled internally).
    _flushHistoryUpdates(rearrangeOverlay: false);
    assert(entry.route._popCompleter.isCompleted);
  }
  assert(() {
    _debugLocked = false;
    return true;
  }());
  _afterNavigation<dynamic>(entry.route);
}

就是調(diào)用 _RouteEntry 的 pop,在這個(gè)函數(shù)中它會(huì)調(diào)用 Route 的 didPop,完成返回值的傳遞、移出動(dòng)畫啟動(dòng)等。但是在  OverlayRoute 中:

bool didPop(T result) {
  final bool returnValue = super.didPop(result);
  assert(returnValue);
  if (finishedWhenPopped)
    navigator.finalizeRoute(this);
  return returnValue;
}

finalizeRoute 的調(diào)用需要依賴 finishedWhenPopped 的值,這個(gè)值在子類中可以被修改,比如 TransitionRoute 中它就是 false,理解也很簡(jiǎn)單,在 TransitionRoute 中執(zhí)行 didPop 之后也不能直接就銷毀 Route,而是先要執(zhí)行移出動(dòng)畫,而如果不需要執(zhí)行動(dòng)畫,則可以直接調(diào)用,否則就在動(dòng)畫執(zhí)行完再執(zhí)行,這一點(diǎn)是通過(guò)監(jiān)聽(tīng)動(dòng)畫狀態(tài)實(shí)現(xiàn)的,在 TransitionRoute 中。

void finalizeRoute(Route<dynamic> route) {
  // FinalizeRoute may have been called while we were already locked as a
  // responds to route.didPop(). Make sure to leave in the state we were in
  // before the call.
  bool wasDebugLocked;
  assert(() { wasDebugLocked = _debugLocked; _debugLocked = true; return true; }());
  assert(_history.where(_RouteEntry.isRoutePredicate(route)).length == 1);
  final _RouteEntry entry =  _history.firstWhere(_RouteEntry.isRoutePredicate(route));
  if (entry.doingPop) {
    // We were called synchronously from Route.didPop(), but didn't process
    // the pop yet. Let's do that now before finalizing.
    entry.currentState = _RouteLifecycle.pop;
    _flushHistoryUpdates(rearrangeOverlay: false);
  }
  assert(entry.currentState != _RouteLifecycle.pop);
  entry.finalize();
  _flushHistoryUpdates(rearrangeOverlay: false);
  assert(() { _debugLocked = wasDebugLocked; return true; }());
}

在 finalizeRoute 中,它會(huì)判斷是否正在 pop 過(guò)程中,如果是,就說(shuō)明此刻是直接調(diào)用的 finalizeRoute,那就需要先執(zhí)行 pop 狀態(tài)的操作,再執(zhí)行 dispose 操作,將狀態(tài)切換到 dispose 進(jìn)行處理,如果不是,就說(shuō)明調(diào)用這個(gè)函數(shù)的時(shí)候,是動(dòng)畫執(zhí)行完的時(shí)候,那么此刻 pop 狀態(tài)處理已經(jīng)完成,所以跳過(guò)了 pop 處理的步驟,如上。下面就看一下 pop 過(guò)程做的處理。

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  // ...
  while (index >= 0) {
    switch (entry.currentState) {
      // ...
      case _RouteLifecycle.pop:
        if (!seenTopActiveRoute) {
          if (poppedRoute != null)
            entry.handleDidPopNext(poppedRoute);
          poppedRoute = entry.route;
        }
        entry.handlePop(
          navigator: this,
          previousPresent: _getRouteBefore(index, _RouteEntry.willBePresentPredicate)?.route,
        );
        assert(entry.currentState == _RouteLifecycle.popping);
        canRemoveOrAdd = true;
        break;
      case _RouteLifecycle.popping:
        // Will exit this state when animation completes.
        break;
      case _RouteLifecycle.dispose:
        // Delay disposal until didChangeNext/didChangePrevious have been sent.
        toBeDisposed.add(_history.removeAt(index));
        entry = next;
        break;
      case _RouteLifecycle.disposed:
      case _RouteLifecycle.staging:
        assert(false);
        break;
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  // ...
}

handlePop 將狀態(tài)切換到 poping(動(dòng)畫執(zhí)行過(guò)程),然后發(fā)出通知,而 poping 狀態(tài)不作處理,因?yàn)檫@是一個(gè)過(guò)渡狀態(tài),在動(dòng)畫執(zhí)行完之后會(huì)自動(dòng)切換到 dispose 狀態(tài),同樣的,上面的 pushing 狀態(tài)也是,而在 dispose 分支中,就是將 _RouteEntry 從 _history 移除并加入到 toBeDisposed,然后在遍歷結(jié)束之后統(tǒng)一銷毀。

remove

remove 的邏輯就是先從 _history 中找到一個(gè)跟傳進(jìn)來(lái)的一致的 _RouteEntry,將它的狀態(tài)設(shè)為 remvoe,再調(diào)用 _flushHistoryUpdates。

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  // ...
  while (index >= 0) {
    switch (entry.currentState) {
        // ...
      case _RouteLifecycle.remove:
        if (!seenTopActiveRoute) {
          if (poppedRoute != null)
            entry.route.didPopNext(poppedRoute);
          poppedRoute = null;
        }
        entry.handleRemoval(
          navigator: this,
          previousPresent: _getRouteBefore(index, _RouteEntry.willBePresentPredicate)?.route,
        );
        assert(entry.currentState == _RouteLifecycle.removing);
        continue;
      case _RouteLifecycle.removing:
        if (!canRemoveOrAdd && next != null) {
          // We aren't allowed to remove this route yet.
          break;
        }
        entry.currentState = _RouteLifecycle.dispose;
        continue;
      case _RouteLifecycle.dispose:
        // Delay disposal until didChangeNext/didChangePrevious have been sent.
        toBeDisposed.add(_history.removeAt(index));
        entry = next;
        break;
      case _RouteLifecycle.disposed:
      case _RouteLifecycle.staging:
        assert(false);
        break;
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  // ...
}

首先會(huì)調(diào)用 handleRemoval,調(diào)用通知,并將狀態(tài)切換到 removing,在 removing 階段再將狀態(tài)切到 dispose,然后就是將其加入 toBeDisposed,所以整個(gè)過(guò)程中是不涉及動(dòng)畫的,一般只用來(lái)移出非正在展示的頁(yè)面,否則還是推薦用 pop。

總結(jié)

以上是路由機(jī)制的實(shí)現(xiàn)原理,就其整體而言,最給人耳目一新的就是狀態(tài)管理的加入,通過(guò)將一個(gè)頁(yè)面的進(jìn)出劃分到不同狀態(tài)處理,是能夠有效降低代碼的復(fù)雜度的,不過(guò)從目前的結(jié)果來(lái)看,這一個(gè)過(guò)程執(zhí)行的還不夠精煉,比如狀態(tài)的劃分不夠合理,從這些狀態(tài)的設(shè)計(jì)來(lái)看,add/push/pop 都有對(duì)應(yīng)的 ing 形式表示正在執(zhí)行中,但是 adding 的存在我暫時(shí)沒(méi)有看到必要性,還有就是感覺(jué)代碼的組織上還是有點(diǎn)問(wèn)題,比如 handleAdd 與 handPush 實(shí)際上還有很大部分的代碼重復(fù)的,這部分不知道以后會(huì)不會(huì)優(yōu)化。

另外還有一點(diǎn)感覺(jué)做的不到位,就是 _routeNamed 這個(gè)函數(shù)沒(méi)有對(duì)外開(kāi)放,而且并不是所有的路由操作都提供了 name 為入?yún)⒌陌b,比如 removeRoute,在這種情況下就沒(méi)法很方便的調(diào)用。

到此這篇關(guān)于flutter 路由機(jī)制的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)flutter 路由機(jī)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論