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


相关推荐
没有bug.的程序员9 天前
本地开发环境优化深度实战:Docker Compose 编排内核、依赖服务治理与极速环境搭建指南
运维·docker·容器·compose·本地开发·编排内核·依赖服务治理
stevenzqzq10 天前
ConstraintLayout写法和Box写法比较
compose
Jomurphys12 天前
Compose 调用 - 震动 LocalHapticFeedback
android·compose
特立独行的猫a14 天前
Kuikly多端框架(KMP)实战:KMP中的 Ktor 网络库的多端适配指南
android·网络·harmonyos·ktor·compose·kmp·kuikly
特立独行的猫a16 天前
腾讯Kuikly框架实战:基于腾讯Kuikly框架实现Material3风格底部导航栏
android·harmonyos·compose·kmp·实战案例·kuikly
stevenzqzq17 天前
Jetpack Compose Modifier 核心说明
compose
儿歌八万首20 天前
硬核春节:用 Compose 打造“赛博鞭炮”
android·kotlin·compose·春节
stevenzqzq22 天前
Compose 中的状态可变性体系
android·compose
stevenzqzq23 天前
kotlin和compose中使用by
kotlin·compose
特立独行的猫a25 天前
从XML到Compose的UI变革:现代(2026)Android开发指南
android·xml·ui·compose·jetpack