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 动画
- 复杂过渡效果
提示: 建议打印此思维导图,贴在工位上,随时参考!