Compose Navigation 时序图


一、点击跳转(navigate)

复制代码
┌──────────┐
│   User   │
└────┬─────┘
     │ 点击
     ▼
┌────────────────────┐
│   Composable(UI)   │
│ onClick {          │
│  navController     │
│   .navigate(route) │
│ }                  │
└────┬───────────────┘
     │
     ▼
┌────────────────────┐
│   NavController    │
│────────────────────│
│ 1. 查 NavGraph     │
│ 2. route 匹配      │
│ 3. 参数解析        │
└────┬───────────────┘
     │
     ▼
┌──────────────────────────────┐
│ NavBackStackEntry (NEW)      │
│──────────────────────────────│
│ - route                      │
│ - arguments                  │
│ - SavedStateHandle           │
│ - ViewModelStore             │
└────┬─────────────────────────┘
     │
     ▼
┌──────────────────────────────┐
│ Composable Destination       │
│ (DetailScreen)               │
│                              │
│ remember(...)                │
│ viewModel()  ← 绑定 Entry    │
└──────────────────────────────┘

二、返回(popBackStack)

复制代码
┌────────────────────┐
│   Composable(UI)   │
│ navController      │
│  .popBackStack()   │
└────┬───────────────┘
     │
     ▼
┌────────────────────┐
│   NavController    │
│────────────────────│
│ 移除当前 Entry     │
└────┬───────────────┘
     │
     ▼
┌──────────────────────────────┐
│ NavBackStackEntry (PREVIOUS) │
│──────────────────────────────│
│ - ViewModel 仍然存在         │
│ - State 仍然存在             │
└────┬─────────────────────────┘
     │
     ▼
┌──────────────────────────────┐
│ Composable 重组              │
│ UI 状态恢复                  │
└──────────────────────────────┘

三、配置变化 / 进程被杀 & 恢复(必懂)

复制代码
┌────────────────────┐
│ Process Kill /     │
│ Configuration      │
└────┬───────────────┘
     │
     ▼
┌──────────────────────────────┐
│ SavedStateRegistry           │
│──────────────────────────────│
│ 保存 NavBackStackEntry       │
│ 保存 route + arguments       │
└────┬─────────────────────────┘
     │
     ▼
┌────────────────────┐
│ 重建 NavHost       │
│ 重建 NavGraph      │
└────┬───────────────┘
     │
     ▼
┌──────────────────────────────┐
│ 恢复 NavBackStackEntry       │
│──────────────────────────────│
│ SavedStateHandle 注入 VM     │
└────┬─────────────────────────┘
     │
     ▼
┌──────────────────────────────┐
│ Composable 重组              │
│ UI 正常显示                  │
└──────────────────────────────┘

四、这张图你一定要记住的 5 个点(重点)

❌ 不是 Composable

✅ 每一个 Entry = 一个 VM 作用域


navigate 只是 创建一个新的 Entry


3️⃣ popBackStack ≠ 重建页面

恢复旧 Entry


4️⃣ State 会自动恢复,但事件不会

所以导航必须用 一次性事件


5️⃣ route 是唯一可恢复的导航信息

不要依赖全局变量 / 单例传参


五、一句话工程总结(你可以直接贴到笔记里)

复制代码
navigate()
  → NavController
    → NavBackStackEntry
      → ViewModel / SavedStateHandle
        → Composable

搞清楚 Entry,一切导航问题都能解释清楚


相关推荐
stevenzqzq9 小时前
Compose 状态 / 协程 总图
compose
儿歌八万首3 天前
Jetpack Compose 动画实战:让你的 UI 动起来
android·kotlin·动画·compose
儿歌八万首6 天前
Jetpack Compose 自定义布局解析
kotlin·compose·自定义布局
zFox6 天前
二、Kotlin高级特性以及Compose状态驱动UI
ui·kotlin·compose
儿歌八万首7 天前
Jetpack Compose :封装 MVVM 框架
android·kotlin·compose
stevenzqzq10 天前
compose中 remember retain rememberSaveable、rememberSerializable的区别
compose
stevenzqzq14 天前
compose Effect概念
compose
stevenzqzq15 天前
Compose 核心组件学习指南
compose
stevenzqzq16 天前
compose中的@Stable概念和用法
compose