🧭 导航基础

Compose 导航路由与页面跳转 · 实战 第1课
🚏 什么是导航路由 Navigation Route

在移动应用中，导航路由 是一种将不同页面（可组合项）与唯一标识符（路由）映射的机制。 就像城市的路牌和地图，路由告诉应用：“当用户点击‘详情’时，请跳转到 detail/{id} 页面”。

📌 路由 = 页面地址
  • “home” → 首页
  • “profile” → 个人中心
  • “article/{id}” → 文章详情
🧩 导航栈
  • 页面入栈 / 出栈
  • 返回栈管理
  • 深层链接支持
❓ 为什么需要导航
痛点导航如何解决
❌ 手动管理页面状态Navigation 自动保存和恢复返回栈状态
❌ 页面间传参混乱类型安全参数 + 路由模板，清晰传递数据
❌ 深层链接难以实现声明式路由，一键支持外部链接跳转
❌ 动画/过渡不统一内置动画支持，一致的用户体验
❌ 代码耦合度高路由解耦页面，独立开发、测试
📚 Compose Navigation 库简介 androidx.navigation

🎯 Jetpack Compose Navigation 是官方声明式导航组件，专为 Compose 设计。 核心依赖：androidx.navigation:navigation-compose

NavController 控制导航动作 NavHost 页面容器 / 占位符 路由表 composable(“home”) 参数传递 NavArgument 深层链接 deepLink 返回栈 backStackEntry navigate() · popBackStack() · 动画 核心组件 扩展概念
🧱 四大核心概念
  • NavController — 导航控制器，执行跳转、返回
  • NavHost — 可组合项容器，显示当前路由对应的页面
  • 路由表 (NavGraph) — 声明页面与路由的映射关系
  • NavBackStackEntry — 返回栈条目，保存页面状态与参数
📟 基础代码骨架 
// 定义路由
sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Detail : Screen("detail/{itemId}") {
        fun createRoute(id: Int) = "detail/$id"
    }
}

// NavHost 设置
NavHost(navController = navController, 
        startDestination = Screen.Home.route) {
    composable(Screen.Home.route) {
        HomePage(navController)
    }
    composable(
        route = Screen.Detail.route,
        arguments = listOf(navArgument("itemId") { type = NavType.IntType })
    ) { backStackEntry ->
        val id = backStackEntry.arguments?.getInt("itemId") ?: 0
        DetailPage(id, navController)
    }
}
🔄 典型跳转流程
Home → Detail(42) → Profile ← popBackStack() 
// 点击跳转
navController.navigate(Screen.Detail.createRoute(42))

// 返回上一页
navController.popBackStack()
📘 课程资料