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