某天发现 Overlay 源码里写了如下信息:
/// Although you can create an [Overlay] directly, it's most common to use the
/// overlay created by the [Navigator] in a [WidgetsApp] or a [MaterialApp]. The
/// navigator uses its overlay to manage the visual appearance of its routes.
尽管您可以直接创建一个 Overlay, 但最常见的是使用 WidgetsApp 或 MaterialApp 中 Navigator 创建的 Overlay.
Navigator 对象使用其 Overlay 对象来管理其路由的视觉外观。
可以发现的信息是: Flutter App 的页面是使用
Overlay"层叠"出来的.
源码
去查看源码确认一下.
WidgetsApp
MaterialApp 和 CupertinoApp 都是使用 WidgetsApp 构造出来的,那我们进入 WidgetsApp 的源码,可以发现它有一个顶级成员: _navigator:
GlobalKey<NavigatorState> _navigator; // <----- 声明
// ...
@override
void initState() {
super.initState();
_updateNavigator(); // <----- 初始化
// ...
}
// ...
void _updateNavigator() {
_navigator = widget.navigatorKey ?? GlobalObjectKey<NavigatorState>(this);
}
_navigator 的类型为 GlobalKey<NavigatorState> ,而 NavigatorState 就是 Navigator 的状态对象.
Navigator 用于管理页面之间如何跳转,通常也可被称为导航管理,如果用户没有传入navigatorKey,它会自动创建一个.
结论: MaterialApp 是Flutter App 最最顶层的 Widget, 每个 App 都会有一个用于路由管理的 Navigator 对象.
Navigator
继续到 Navigator 源码里,发现了个 Overlay 类型成员 _overlayKey:
// 1478 行
final GlobalKey<OverlayState> _overlayKey = GlobalKey<OverlayState>();
// ...
// 1576行
/// The overlay this navigator uses for its visual presentation.
OverlayState get overlay => _overlayKey.currentState;
// ...
// 2214行
@override
Widget build(BuildContext context) {
// ...
return Listener(
onPointerDown: _handlePointerDown,
onPointerUp: _handlePointerUpOrCancel,
onPointerCancel: _handlePointerUpOrCancel,
child: AbsorbPointer(
absorbing: false,
child: FocusScope(
node: focusScopeNode,
autofocus: true,
child: Overlay( // <----- 0.0
key: _overlayKey, // <----- ^.^
),
),
),
);
}
在 Navigator 的build()方法里发现Navigator就是用 Overlay 做子布局的!
现在就证明了文章开始的那个结论: Flutter App 的页面都是使用 Overlay "层叠"出来的.
下一篇再简单看看 Overlay
