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


相关推荐
至乐活着16 天前
Docker Compose多服务编排实战:从零搭建Node.js+MySQL+Redis全栈应用
docker·微服务·devops·容器编排·compose
le1616161 个月前
Android Compose——尺寸修饰符的调用顺序构成的不同尺寸约束效果
android·compose·modifier
le1616161 个月前
Android Compose Modifier修饰符
android·compose·modifier
小书房1 个月前
Android UI为什么由XML转向Compose
xml·ui·compose·声明式ui
le1616161 个月前
Android Compose基础布局——从传统XML的视角切入了解
xml·compose
赏金术士1 个月前
企业级 Jetpack Compose 项目(入门版)最佳结构
android·kotlin·compose
Jomurphys1 个月前
Compose 调用 - 液态玻璃 Backdrop
android·compose
氦客1 个月前
Android Compose 图层的合成 : BlendMode
android·compose·jetpack·layer·blendmode·graphics·图层的合成
赏金术士1 个月前
第六章:UI组件与Material3主题
android·ui·kotlin·compose
赏金术士1 个月前
Jetpack Compose 底部导航实战教程(完整版)
android·kotlin·compose