Flutter Navigator 知识架构思维导图

Flutter Navigator 知识架构思维导图

                                    Flutter Navigator
                                           |
                    ┌──────────────────────┼──────────────────────┐
                    |                      |                      |
              核心概念                  API 体系                高级特性
                    |                      |                      |
        ┌───────────┼───────────┐   ┌──────┼──────┐      ┌───────┼───────┐
        |           |           |   |      |      |      |       |       |
    Route      Navigator    Page  命令式  声明式  可恢复  嵌套   Hero   自定义
        |           |           |   API    API    API    导航    动画   过渡
        |           |           |   |      |      |      |       |       |
    ┌───┴───┐   ┌───┴───┐   ┌───┴───┐  |      |      |      |       |       |
    |       |   |       |   |       |  |      |      |      |       |       |
 生命  状态  栈操  观察  配置  模型  Push Pop Pages Trans restor  Nested Hero  Custom
 周期  查询  作   者   置   更新  系列 系列 List  Dele  able   Nav    Anim  Route
    |       |   |       |   |       |  |      |      |      gate  系列   |       |
    |       |   |       |   |       |  |      |      |      |      |       |      |
 install  isCur push  didPush routes Page push pop pages onPop restorab Multi Hero- PageRoute
 didPush  isFirst pop  didPop  onGen- can  pushN popUntil onPop  Page  lePush Level Control Builder
 didPop   isActive      didRepl Gene- Update pushRepl maybePop Trans-      Nav    ler
 dispose          remove didStart rate      pushAndRem canPop  ition             Scope
                        UserGes           AndRemUntil         Dele-
                                                             gate

详细架构分层

第一层：三大支柱

1. 核心概念层

核心概念
├── Route（路由）
│   ├── 生命周期管理
│   │   ├── install() - 安装路由
│   │   ├── didPush() - 推入完成
│   │   ├── didPop() - 弹出处理
│   │   └── dispose() - 销毁清理
│   └── 状态查询
│       ├── isCurrent - 是否栈顶
│       ├── isFirst - 是否栈底
│       └── isActive - 是否在栈中
│
├── Navigator（导航器）
│   ├── 栈操作
│   │   ├── push - 推入
│   │   ├── pop - 弹出
│   │   ├── replace - 替换
│   │   └── remove - 移除
│   └── 观察者模式
│       ├── didPush - 推入通知
│       ├── didPop - 弹出通知
│       ├── didReplace - 替换通知
│       └── didRemove - 移除通知
│
└── Page（页面）
    ├── 配置
    │   ├── key - 唯一标识
    │   ├── name - 路由名称
    │   ├── arguments - 参数
    │   └── restorationId - 恢复ID
    └── 模型更新
        └── canUpdate() - 判断可否更新

2. API 体系层

API 体系
├── 命令式 API（Imperative API）
│   ├── Push 系列
│   │   ├── push() - 基础推入
│   │   ├── pushNamed() - 命名推入
│   │   ├── pushReplacement() - 替换推入
│   │   └── pushAndRemoveUntil() - 推入并清除
│   ├── Pop 系列
│   │   ├── pop() - 基础返回
│   │   ├── popUntil() - 条件返回
│   │   ├── maybePop() - 尝试返回
│   │   └── canPop() - 检查可返回
│   └── 其他操作
│       ├── replace() - 替换路由
│       ├── replaceRouteBelow() - 替换下层
│       ├── removeRoute() - 移除路由
│       └── removeRouteBelow() - 移除下层
│
├── 声明式 API（Declarative API）
│   ├── Pages List
│   │   └── 管理路由栈
│   ├── onPopPage
│   │   └── 处理页面弹出
│   └── TransitionDelegate
│       ├── resolve() - 解析过渡
│       ├── markForPush() - 标记推入
│       ├── markForAdd() - 标记添加
│       ├── markForPop() - 标记弹出
│       └── markForRemove() - 标记移除
│
└── 可恢复 API（Restorable API）
    ├── restorablePush()
    ├── restorablePushNamed()
    ├── restorablePushReplacement()
    ├── restorablePushAndRemoveUntil()
    └── RestorableRouteFuture
        ├── present() - 显示路由
        ├── onComplete() - 完成回调
        └── route - 路由对象

3. 高级特性层

高级特性
├── 嵌套导航（Nested Navigation）
│   ├── 多级 Navigator
│   ├── rootNavigator 参数
│   └── 独立路由栈
│
├── Hero 动画
│   ├── HeroController
│   ├── HeroControllerScope
│   └── Hero Widget
│
├── 自定义过渡（Custom Transitions）
│   ├── PageRouteBuilder
│   │   ├── pageBuilder - 页面构建
│   │   ├── transitionsBuilder - 过渡构建
│   │   └── transitionDuration - 过渡时长
│   └── 常见动画类型
│       ├── SlideTransition - 滑动
│       ├── FadeTransition - 淡入淡出
│       ├── ScaleTransition - 缩放
│       └── RotationTransition - 旋转
│
└── 其他特性
    ├── WillPopScope - 拦截返回
    ├── PopScope - 返回控制
    ├── RoutePopDisposition - 弹出倾向
    └── NavigationNotification - 导航通知

数据流转图

用户操作
    ↓
Navigator API 调用
    ↓
路由栈变更
    ↓
_flushHistoryUpdates()
    ↓
路由生命周期方法
    ↓
Overlay 更新
    ↓
界面渲染
    ↓
NavigatorObserver 通知
    ↓
业务逻辑响应

状态机图

Route 生命周期状态机

    [创建] → staging
       ↓
    [决策]
       ↓
   ┌───┴───┐
   |       |
  add    push ← pushReplace
   |       |         |
   ↓       ↓         ↓
 adding  pushing   replace
   |       |         |
   └───┬───┴────┬────┘
       ↓        |
      idle ←────┘
       |
   [活跃状态]
       |
   ┌───┴───┐
   |       |
  pop   complete
   |       |
   ↓       ↓
popping  remove
   |       |
   └───┬───┘
       ↓
    dispose
       ↓
   disposing
       ↓
   disposed

使用场景决策树

需要导航？
    ├─ 是 → 是否需要状态恢复？
    │        ├─ 是 → 使用 restorablePush 系列
    │        └─ 否 → 继续
    │                ↓
    │           是否简单跳转？
    │                ├─ 是 → 使用 push/pushNamed
    │                └─ 否 → 需要清除历史？
    │                        ├─ 是 → 使用 pushAndRemoveUntil
    │                        └─ 否 → 需要替换当前？
    │                                ├─ 是 → 使用 pushReplacement
    │                                └─ 否 → 使用声明式 API
    │
    └─ 否 → 需要返回？
            ├─ 是 → 是否带结果返回？
            │        ├─ 是 → pop(result)
            │        └─ 否 → 返回到特定页面？
            │                ├─ 是 → popUntil
            │                └─ 否 → pop()
            │
            └─ 否 → 其他操作
                    ├─ 替换路由 → replace
                    ├─ 移除路由 → remove
                    └─ 观察路由 → NavigatorObserver

性能优化考虑

性能优化
    |
    ├── 路由懒加载
    │   └── onGenerateRoute 动态创建
    |
    ├── 减少重建
    │   ├── 使用 const 构造函数
    │   └── 合理使用 Key
    |
    ├── 内存管理
    │   ├── 及时 dispose
    │   └── 清除不用的路由
    |
    └── 动画优化
        ├── 合理设置 transitionDuration
        └── 避免复杂动画叠加

GetX 集成架构

GetX + Navigator 混合架构

                GetX 路由层
                     |
        ┌────────────┼────────────┐
        |                         |
   简单跳转              复杂场景
   Get.to()           Navigator API
   Get.off()               |
        |           ┌──────┴──────┐
        |           |             |
        └───────────┤         需要恢复
              Flutter        restorablePush
            Navigator
                |
        实际路由栈管理

Mind App 项目中的应用

Mind App 导航架构
    |
    ├── 主导航（GetX）
    │   ├── 首页
    │   ├── 聊天列表
    │   ├── 通讯录
    │   └── 我的
    |
    ├── 二级导航（Navigator）
    │   ├── 聊天详情
    │   ├── 用户资料
    │   ├── 设置页面
    │   └── 搜索页面
    |
    └── 弹窗导航
        ├── 对话框（showDialog）
        ├── 底部弹窗（showModalBottomSheet）
        └── 自定义路由（PageRouteBuilder）

记忆口诀

Push 系列

push：推入新页面
pushNamed：带名字推
pushReplacement：替换当前
pushAndRemoveUntil：推入清旧的

Pop 系列

pop：简单返回
popUntil：返回到某页
maybePop：可能返回
canPop：能否返回

生命周期

install → didPush → idle → didPop → dispose
安装 → 推入 → 活跃 → 弹出 → 销毁

学习优先级

必须掌握（P0）

• push / pop
• pushNamed / popUntil
• Navigator.of(context)

⭐ 重要掌握（P1）

• pushReplacement
• pushAndRemoveUntil
• RouteSettings 参数传递
• NavigatorObserver

深入理解（P2）

• Pages API
• TransitionDelegate
• 状态恢复
• 嵌套导航

选修内容（P3）

• 自定义 Route
• Hero 动画
• 复杂过渡效果

提示: 建议打印此思维导图，贴在工位上，随时参考！