今天在研究flutter路由管理的过程中想到了一个问题,就是想要实现一个全局的不跟随路由跳转的按钮,始终悬浮在最上方,之前使用过一种方式,但是一直没有研究他到底为什么可以实现始终悬浮在最上层
navigatorKey.currentState?.overlay?.insert(OverlayEntry(builder: (ctx){
return Center(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
},opaque: false));
void insert(OverlayEntry entry, { OverlayEntry? below, OverlayEntry? above }) {
entry._overlay = this;
setState(() {
_entries.insert(_insertionIndex(below, above), entry);
});
}
这种方式是取出navigatorState中的overlay,在其最后插入OverlayEntry,这个时候会在屏幕上显示100*100的蓝色方块,并且不影响下层的事件响应,这个时候我点击下层的一个按钮实现路由跳转,到pageTwo,发现我的蓝色方块依旧是在最上层,今天看过路由跳转的源码后就产生了疑问,路由跳转本质也是将页面的OverlayEntry加入到了overlay中,如果是按照顺序,pageTwo的OverlayEntry会显示到蓝色方块的上层,但是结果是没有,然后就去查看源码发现,在路由跳转过程中,不是直接调用insert把pageTwo的OverlayEntry加入到overlay中的,而是做了一些处理
1.通过RouteEntry,获取到所有的路由相关的OverlayEntry,_history是路由栈
Iterable<OverlayEntry> get _allRouteOverlayEntries sync* {
for (final _RouteEntry entry in _history)
yield* entry.route.overlayEntries;
}
这一步过后,就将所有的路由相关的OverlayEntry组成了一个Iterable返回,然后调用了rearrange
void rearrange(Iterable<OverlayEntry> newEntries, { OverlayEntry? below, OverlayEntry? above }) {
// newEntriesList 为 路由相关的OverlayEntry列表
final List<OverlayEntry> newEntriesList = newEntries is List<OverlayEntry> ? newEntries : newEntries.toList(growable: false);
// old为之前的路由以及蓝色方块的OverlayEntry
final LinkedHashSet<OverlayEntry> old = LinkedHashSet<OverlayEntry>.from(_entries);
for (final OverlayEntry entry in newEntriesList) {
entry._overlay ??= this;
}
setState(() {
// 清空_entries
_entries.clear();
//先将 路由相关的OverlayEntry列表 加入到 _entries 中
_entries.addAll(newEntriesList);
//然后将 路由相关的 OverlayEntry 从old(老的_entries) 中移除,此时old中就只剩下非路由相关的 OverlayEntry ,比如我们手动insert的 OverlayEntry
old.removeAll(newEntriesList);
//_insertionIndex(below, above) = _entries.length,所以这里的结果就是将所有非路由相关的 OverlayEntry 添加到_entries的最后面,
_entries.insertAll(_insertionIndex(below, above), old);
});
}
这里我才豁然开朗,原来是把我的蓝色方块OverlayEntry拿出来放到了最后,所以导致蓝色方块始终在页面的最上层,这里强调一下,_entries中的页面是倒序渲染的,所以越是最后就越在上层
最后附上我的demo:https://github.com/butterflyXX/flutter_util
