Flutter Navigator 的构成

某天发现 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