Flutter Navigator 知识架构思维导图

perl 复制代码
                                    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. 核心概念层
scss 复制代码
核心概念
├── 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 体系层
scss 复制代码
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. 高级特性层
markdown 复制代码
高级特性
├── 嵌套导航(Nested Navigation)
│   ├── 多级 Navigator
│   ├── rootNavigator 参数
│   └── 独立路由栈
│
├── Hero 动画
│   ├── HeroController
│   ├── HeroControllerScope
│   └── Hero Widget
│
├── 自定义过渡(Custom Transitions)
│   ├── PageRouteBuilder
│   │   ├── pageBuilder - 页面构建
│   │   ├── transitionsBuilder - 过渡构建
│   │   └── transitionDuration - 过渡时长
│   └── 常见动画类型
│       ├── SlideTransition - 滑动
│       ├── FadeTransition - 淡入淡出
│       ├── ScaleTransition - 缩放
│       └── RotationTransition - 旋转
│
└── 其他特性
    ├── WillPopScope - 拦截返回
    ├── PopScope - 返回控制
    ├── RoutePopDisposition - 弹出倾向
    └── NavigationNotification - 导航通知

数据流转图

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

状态机图

yaml 复制代码
Route 生命周期状态机

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

使用场景决策树

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

性能优化考虑

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

GetX 集成架构

vbnet 复制代码
GetX + Navigator 混合架构

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

Mind App 项目中的应用

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

记忆口诀

Push 系列

perl 复制代码
push:推入新页面
pushNamed:带名字推
pushReplacement:替换当前
pushAndRemoveUntil:推入清旧的

Pop 系列

perl 复制代码
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 动画
  • 复杂过渡效果

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

相关推荐
阿东在coding3 小时前
Flutter Navigator 深度学习
aigc
春末的南方城市7 小时前
清华&字节开源HuMo: 打造多模态可控的人物视频,输入文字、图片、音频,生成电影级的视频,Demo、代码、模型、数据全开源。
人工智能·深度学习·机器学习·计算机视觉·aigc
PetterHillWater8 小时前
Claude Code V2集成KAT-Coder
aigc
Mintopia8 小时前
AIGC 训练数据的隐私保护技术:联邦学习在 Web 场景的落地
前端·javascript·aigc
这里有鱼汤9 小时前
从DeepSeek到Kronos,3个原因告诉你:Kronos如何颠覆传统量化预测
后端·python·aigc
EdisonZhou10 小时前
多Agent协作入门:基于A2A协议的Agent通信(中)
aigc·agent·.net core
嘟嘟MD18 小时前
程序员副业 | 2025年9月复盘
后端·aigc
墨风如雪21 小时前
就它了!Claude Sonnet 4.5:AI编程与智能体的新王牌
aigc
墨风如雪21 小时前
AI视频革命奇点:Sora 2的数字幻境
aigc