阅读 2034

Flutter 路由源码解析

前言

这是博客《Flutter路由 - Navigator 》的番外篇,如果你没有看过主篇真的不建议你直接看这篇文章,因为它真的炒鸡炒鸡枯燥乏味……

不讲客套话啦,我们分别从Navigatorpushpop两个方法去探索源码以及一些重要的细节。

push

当我们想要push一个Page在界面上时,我们可以调用如下代码:

Navigator.push(
  context,
  PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {
    return MyPage(args);
  }));
复制代码

我们以Navigator.push(BuildContext context, Route<T> route)方法为起始进行追述:

static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}
复制代码

1.NavigatorState对象检索

就像上篇文章有提到过的,Navigator.push是一个静态方法,使得你可以在任何地方进行调用,其内部通过of方法在Element树(BuildContextElement的抽象类)中进行向上搜索。我们看下Navigator.of方法:

static NavigatorState of(
    BuildContext context, {
      bool rootNavigator = false,
      bool nullOk = false,
    }) {
    final NavigatorState navigator = rootNavigator
        ? context.rootAncestorStateOfType(const TypeMatcher<NavigatorState>())
        : context.ancestorStateOfType(const TypeMatcher<NavigatorState>());
    return navigator;
}
复制代码

主要通过rootNavigator变量判断是否要检索根部Navigator,rootAncestorStateOfType向上查找最根部匹配类型对象,ancestorStateOfType向上查找最近的匹配类型对象。从这个方法我们也可以知道Navigator.of方法查找的不是Navigator而是NavigatorState,这个也比较容易理解,Navigator是一个StatefulWidget,具体的逻辑都在它的State对象当中。

2.push实现

接下来看NavigatorState.push实现:

//0
final List<Route<dynamic>> _history = <Route<dynamic>>[];

Future<T> push<T extends Object>(Route<T> route) {
   	...
   	 //1
    final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
    //2
    route._navigator = this;
    //3
    route.install(_currentOverlayEntry);
    //4
    _history.add(route);
    //5
    route.didPush();
    route.didChangeNext(null);
    if (oldRoute != null) {
      oldRoute.didChangeNext(route);
      route.didChangePrevious(oldRoute);
    }
    //6
    for (NavigatorObserver observer in widget.observers)
      observer.didPush(route, oldRoute);
    _afterNavigation();
    return route.popped;
}
复制代码
  • 0._history就是Navigator所维护的界面栈,但它只是一个普通的List

    1. 获取原本在栈顶的route,因为_history是一个普通的List,所以栈顶就是最后一个元素。
  • 2.让新加入的routeNavigator引用绑定。

  • 3.installroute转换为OverlayEntry,并插入到List<OverlayEntry>中的重要过程,_currentOverlayEntryoldRoute对应的OverlayEntry,传入_currentOverlayEntry的意思是插入到它的上面。具体细节我们稍后细讲。

  • 4.route入栈。

  • 5.完成新老界面的转换,内部有一些事件和动画处理。

  • 6.通知所有的Navigator观察者。

3. route.install

我们最关心的是第3步,route.install(_currentOverlayEntry); Route类里这个方法是一个空实现,具体细节在它的子类中,我们重点看OverlayRoute的实现:

abstract class OverlayRoute<T> extends Route<T> {
...
  @override
  List<OverlayEntry> get overlayEntries => _overlayEntries;
  final List<OverlayEntry> _overlayEntries = <OverlayEntry>[];
  
  @override
  void install(OverlayEntry insertionPoint) {
    _overlayEntries.addAll(createOverlayEntries());
    navigator.overlay?.insertAll(_overlayEntries, above: insertionPoint);
    super.install(insertionPoint);
  }
...
复制代码

一个Route_overlayEntries 通常包含两个OverlayEntry,一个是遮罩,一个是界面本身,都在createOverlayEntries中创建。

先对_overlayEntries完成两个OverlayEntryadd,然后调用navigator所持有的overlay对象,将遮罩和界面插入到overlay所持有的List<OverlayEntry>中,以备绘制到界面之上。

4. createOverlayEntries

这是RouteOverlayEntry的关键,具体的实现在ModalRoute中:

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

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

复制代码

yield语法不熟悉没关系,你只要知道这个方法最终会返回两个OverlayEntry对象就好了。_modalBarrier就是遮罩层,就是Dialog那个背景遮罩。

我们重点关心第二个page的创建。OverlayEntry中传入两个参数:

  • builder:这是一个function, 我们自定义的Page创建就在这个方法之中。

  • maintainState: 这个属性我们在上篇博客有讲,表示当这个 Widget 不可见时,是否需要继续保持它的状态,是否需要让它继续活着。通常一个 Page maintainState为true, Dialog 为 false。

5. _buildModalScope

看下_buildModalScope实现:

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

_buildModalScope创建了一个 Widget _ModalScope,并将Route自己传了进去。_ModalScope是个啥呢?

_ModalScope 是一个StatefulWidget,我们直接看它的 Statebuild方法:

@override
  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: widget.route.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内部又嵌套了很多Widget,并且创建所用的数据都来自Route,我们重点关注最后一个Builder,可以看到它最后return 调用的是 routebuildPage方法,眼熟吗?就是我们最开始调用push方法传入的自定义PageRouteBuilder对象:

Navigator.push(
  context,
  PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {
    return MyPage(args);
  }));
复制代码

到这里你知道你的传入的 Route 是如何被使用的了。

我们回头看一下Route转化为OverlayEntry之后,Overlay是如何处理的:

6. 插入到Overlay中

之前我们是这样插入到overlay中的:navigator.overlay?.insertAll(_overlayEntries, above: insertionPoint); navigator.overlay实际是OverlayState

class OverlayState extends State<Overlay> with TickerProviderStateMixin {
...
void insertAll(Iterable<OverlayEntry> entries, { OverlayEntry above }) {
    ...
    //1
    for (OverlayEntry entry in entries) {
      entry._overlay = this;
    }
    //2
    setState(() {
      final int index = above == null ? _entries.length : _entries.indexOf(above) + 1;
      _entries.insertAll(index, entries);
    });
  }
...
复制代码
    1. 将每一个要插入到集合中的OverlayEntry绑定自身,绑定自身的原因是我们上篇文章所讲的:元素自治。 插入是由Overlay中进行的,但删除却是每个元素自己调用的。
    1. 看到了熟悉的setState((){}方法,集合插入完成后,将触发Overlay的 rebuild。

所以接下来我们看一下 OverlayStatebuild方法:

@override
  Widget build(BuildContext context) {
    //1
    final List<Widget> onstageChildren = <Widget>[];
    final List<Widget> offstageChildren = <Widget>[];
    bool onstage = true;
    //2
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      //3
      if (onstage) {
        //4
        onstageChildren.add(_OverlayEntry(entry));
        if (entry.opaque)
          onstage = false;
       //5
      } else if (entry.maintainState) {
        offstageChildren.add(TickerMode(enabled: false, child: _OverlayEntry(entry)));
      }
    }
    //6
    return _Theatre(
    	//7
      onstage: Stack(
        fit: StackFit.expand,
        children: onstageChildren.reversed.toList(growable: false),
      ),
      //8
      offstage: offstageChildren,
    );
  }
复制代码
  • 1.创建两个空列表,分别存储“台上”将要被绘制的,和“台下”不需要绘制的 Widget。

  • 2.开始遍历所有的OverlayEntry,准备将他们分配到两个集合当中。值得注意的是,这里是倒序遍历,后加入的元素绘制到最上层。

  • 3.最开始每个OverlayEntry都是有机会被绘制的,直到某个OverlayEntryopaque=true,其他OverlayEntry没有机会“上台“了

  • 4.可以看到OverlayEntry被当做参数传给了_OverlayEntry,完成了一个纯 Dart 类到 Widget 的转换。_OverlayEntry代码很简单,它将根据OverlayEntry中的属性进行 build。

  • 5.没有机会上台的OverlayEntry开始判断maintainState值,需要保存的状态的进入offstageChildren,不需要的保存状态的,没有机会参与这一次的 build ,他们将被销毁。

  • 6.分配结束之后,进入剧场: _Theatre

  • 7.台上需要被绘制的进入Stack组件,准备绘制。

  • 8.不需要被绘制的,只会进行build。

至此,新push的Page完成了创建和绘制。

pop

看完了 push , 我们在看一下 pop:

1.pop

bool pop<T extends Object>([ T result ]) {
	...
	//1
    final Route<dynamic> route = _history.last;
    bool debugPredictedWouldPop;
    //2
    if (route.didPop(result ?? route.currentResult)) {
      if (_history.length > 1) {
       //3
        _history.removeLast();
        if (route._navigator != null)
          _poppedRoutes.add(route);
         //4
        _history.last.didPopNext(route);
        //5
        for (NavigatorObserver observer in widget.observers)
          observer.didPop(route, _history.last);
      } else {
        return false;
      }
    } else {
		...
    }
    _afterNavigation();
    return true;
  }
复制代码
  • 1.获取集合末尾,也就是栈顶的route,它将被pop。

  • 2.可以看到didPop是有返回值的,也就说如果返回了 false,是可以不弹出的。如果返回了 true,didPop内部有一些销毁处理,我们稍后看。

  • 3.如果didPop返回了 true, 会做出栈处理。

  • 4.通知下一个route 你回到前台了。

  • 5.通知所有的观察者。

2.didPop

我们重点关注 Page 回收的处理,所以看一下OverlayRoute中的 didPop

abstract class OverlayRoute<T> extends Route<T> {
...
  @override
  bool didPop(T result) {
    final bool returnValue = super.didPop(result);
    if (finishedWhenPopped)
      navigator.finalizeRoute(this);
    return returnValue;
  }
复制代码

看一下navigator.finalizeRoute

void finalizeRoute(Route<dynamic> route) {
    ...
    route.dispose();
  }
复制代码

abstract class OverlayRoute<T> extends Route<T> {
...
@override
  void dispose() {
    for (OverlayEntry entry in _overlayEntries)
      entry.remove();
    _overlayEntries.clear();
    super.dispose();
}
复制代码

可以看到遍历执行了所有OverlayEntryremove方法:

void remove() {
	//1
    final OverlayState overlay = _overlay;
    _overlay = null;
    //2
    if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) {
      SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
        //3
        overlay._remove(this);
      });
    } else {
      overlay._remove(this);
    }
  }
复制代码
  • 1.清楚引用,避免内存泄露

  • 2.判断一下当前调度机状态,稍后或立刻执行OverlayState_remove方法.

void _remove(OverlayEntry entry) {
    if (mounted) {
      _entries.remove(entry);
      setState(() { /* entry was removed */ });
    }
  }
复制代码

从集合中清楚当前的OverlayEntry,并触发一次 Overlay 的rebuild,因为_entries已经没有当前界面了,rebuild之后也就自然不会存在了。

结语

好啦,push和pop的代码流程都过完啦~