第四章：NavigationCompose页面导航
第四章：Navigation Compose 页面导航
Navigation Compose 是官方提供的声明式导航解决方案，替代传统的 Fragment 管理。
4.1 路由常量定义
避免魔法字符串，统一管理路由：
// AppRoutes.ktobjectAppRoutes{constvalHOME="home"constvalPROFILE="profile"constvalARG_ARTICLE_ID="articleId"constvalDETAIL="detail/{$ARG_ARTICLE_ID}"// 参数路由fundetailRoute(articleId:Int):String="detail/$articleId"}路由类型：
| 类型 | 示例 | 说明 |
|---|---|---|
| 固定路由 | "home" | 无参数 |
| 参数路由 | "detail/{articleId}" | 路径参数 |
| 查询路由 | "detail?tab=1" | URL 参数 |
4.2 导航图 AppNavGraph
@ComposablefunAppNavGraph(){valnavController=rememberNavController()NavHost(navController=navController,startDestination=AppRoutes.HOME,// 起始页面){composable(AppRoutes.HOME){HomePage(navController)}composable(AppRoutes.PROFILE){ProfilePage(navController)}composable(route=AppRoutes.DETAIL,// detail/{articleId}arguments=listOf(navArgument(AppRoutes.ARG_ARTICLE_ID){type=NavType.IntType})){backStackEntry->valarticleId=backStackEntry.arguments?.getInt(AppRoutes.ARG_ARTICLE_ID)?:0DetailPage(navController=navController,articleId=articleId)}}}关键点：
NavHost是导航容器，管理页面栈composable注册页面，route 参数定义路径arguments声明路由参数及其类型backStackEntry.arguments获取传递的参数
4.3 页面间跳转
@ComposablefunHomePage(navController:NavController){// 跳转到详情页valonArticleClick:(ArticleBean)->Unit={article->navController.navigate(AppRoutes.detailRoute(article.id))}// 跳转到个人中心valonProfileClick:()->Unit={navController.navigate(AppRoutes.PROFILE)}}返回上一页：
IconButton(onClick={navController.popBackStack()}){Icon(Icons.AutoMirrored.Filled.ArrowBack,contentDescription="返回")}4.4 详情页参数传递流程
首页列表点击 ↓ navController.navigate("detail/123") ↓ NavHost 匹配 route = "detail/{articleId}" ↓ backStackEntry.arguments?.getInt("articleId") → 123 ↓ DetailPage(articleId = 123) ↓ DetailViewModel(articleId) ↓ ArticleRepository.getArticleById(123)4.5 startDestination 与 deep link
NavHost(navController=navController,startDestination=AppRoutes.HOME,){/* ... */}startDestination：应用启动时的第一个页面
deep link：可被外部调用的链接（如https://myapp.com/detail/123）
4.6 导航最佳实践
| 实践 | 说明 |
|---|---|
| 路由常量化 | 避免魔法字符串，用 object 管理 |
| 参数类型声明 | NavType.IntType / StringType / FloatType |
| 回退时清栈 | popUpTo可控制返回栈 |
| key 唯一性 | 重复进入同一页面用不同 key 区分 |
示例：返回时清空整个栈（从详情页返回直接到首页）：
navController.navigate(AppRoutes.HOME){popUpTo(AppRoutes.HOME){inclusive=true}}4.7 总结
- AppRoutes 统一管理路由常量
- NavHost + composable 注册页面
- navigate() 执行跳转，popBackStack() 返回
- arguments 声明参数，backStackEntry 获取
- 参数通过函数参数层层传递到 ViewModel
上一章：第三章：MVVM 架构与 ViewModel 下一章：第五章：数据层 — 网络请求与 Repository