前言
这是博客《 Flutter 路由原理解析 》的番外篇，如果你没有看过主篇真的不建议你直接看这篇文章，因为它真的炒鸡炒鸡枯燥乏味……不讲客套话啦，我们分别从 Navigator 的 push 和 pop 两个方法去探索源码以及一些重要的细节。
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 树（ BuildContext 是 Element 的抽象类）中进行向上搜索。我们看下 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 。
获取原本在栈顶的route，因为 _history 是一个普通的 List ，所以栈顶就是最后一个元素。
2.让新加入的 route 和 Navigator 引用绑定。 3. install 是 route 转换为 OverlayEntry ，并插入到 List<OverlayEntry> 中的重要过程， _currentOverlayEntry 是 oldRoute 对应的 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 完成两个 OverlayEntry 的 add ,然后调用 navigator 所持有的 overlay 对象，将遮罩和界面插入到 overlay 所持有的 List<OverlayEntry> 中，以备绘制到界面之上。
4. createOverlayEntries
这是 Route 到 OverlayEntry 的关键,具体的实现在 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 ,我们直接看它的 State 的 build 方法：
@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 调用的是 route 的 buildPage 方法，眼熟吗？就是我们最开始调用 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);
});
}
...
将每一个要插入到集合中的 OverlayEntry 绑定自身，绑定自身的原因是我们上篇文章所讲的：元素自治。插入是由 Overlay 中进行的，但删除却是每个元素自己调用的。
2.看到了熟悉的 setState((){} 方法，集合插入完成后，将触发 Overlay 的 rebuild。
所以接下来我们看一下 OverlayState 的 build 方法：
@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 都是有机会被绘制的，直到某个 OverlayEntry 的 opaque=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();
}
可以看到遍历执行了所有 OverlayEntry 的 remove 方法：
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之后也就自然不会存在了。
作者：暴打小女孩
原文： https://juejin.im/post/5c8db8fff265da2de52dd80f