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,一切导航问题都能解释清楚


相关推荐
le1616167 天前
Android Compose——尺寸修饰符的调用顺序构成的不同尺寸约束效果
android·compose·modifier
le1616168 天前
Android Compose Modifier修饰符
android·compose·modifier
小书房8 天前
Android UI为什么由XML转向Compose
xml·ui·compose·声明式ui
le1616169 天前
Android Compose基础布局——从传统XML的视角切入了解
xml·compose
赏金术士14 天前
企业级 Jetpack Compose 项目(入门版)最佳结构
android·kotlin·compose
Jomurphys15 天前
Compose 调用 - 液态玻璃 Backdrop
android·compose
氦客18 天前
Android Compose 图层的合成 : BlendMode
android·compose·jetpack·layer·blendmode·graphics·图层的合成
赏金术士19 天前
第六章:UI组件与Material3主题
android·ui·kotlin·compose
赏金术士19 天前
Jetpack Compose 底部导航实战教程(完整版)
android·kotlin·compose
程序员煊子19 天前
用 Cursor 从零搭一个 Compose 本地记账 App:实战记录与源码解析
android·kotlin·compose·cursor