第四章Navigation Compose 页面导航Navigation Compose 是官方提供的声明式导航解决方案替代传统的 Fragment 管理。4.1 路由常量定义避免魔法字符串统一管理路由// AppRoutes.ktobjectAppRoutes{constvalHOMEhomeconstvalPROFILEprofileconstvalARG_ARTICLE_IDarticleIdconstvalDETAILdetail/{$ARG_ARTICLE_ID}// 参数路由fundetailRoute(articleId:Int):Stringdetail/$articleId}路由类型类型示例说明固定路由home无参数参数路由detail/{articleId}路径参数查询路由detail?tab1URL 参数4.2 导航图 AppNavGraphComposablefunAppNavGraph(){valnavControllerrememberNavController()NavHost(navControllernavController,startDestinationAppRoutes.HOME,// 起始页面){composable(AppRoutes.HOME){HomePage(navController)}composable(AppRoutes.PROFILE){ProfilePage(navController)}composable(routeAppRoutes.DETAIL,// detail/{articleId}argumentslistOf(navArgument(AppRoutes.ARG_ARTICLE_ID){typeNavType.IntType})){backStackEntry-valarticleIdbackStackEntry.arguments?.getInt(AppRoutes.ARG_ARTICLE_ID)?:0DetailPage(navControllernavController,articleIdarticleId)}}}关键点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 linkNavHost(navControllernavController,startDestinationAppRoutes.HOME,){/* ... */}startDestination应用启动时的第一个页面deep link可被外部调用的链接如https://myapp.com/detail/1234.6 导航最佳实践实践说明路由常量化避免魔法字符串用 object 管理参数类型声明NavType.IntType / StringType / FloatType回退时清栈popUpTo可控制返回栈key 唯一性重复进入同一页面用不同 key 区分示例返回时清空整个栈从详情页返回直接到首页navController.navigate(AppRoutes.HOME){popUpTo(AppRoutes.HOME){inclusivetrue}}4.7 总结AppRoutes 统一管理路由常量NavHost composable 注册页面navigate() 执行跳转popBackStack() 返回arguments 声明参数backStackEntry 获取参数通过函数参数层层传递到 ViewModel上一章第三章MVVM 架构与 ViewModel 下一章第五章数据层 — 网络请求与 Repository
第四章：NavigationCompose页面导航
第四章Navigation Compose 页面导航Navigation Compose 是官方提供的声明式导航解决方案替代传统的 Fragment 管理。4.1 路由常量定义避免魔法字符串统一管理路由// AppRoutes.ktobjectAppRoutes{constvalHOMEhomeconstvalPROFILEprofileconstvalARG_ARTICLE_IDarticleIdconstvalDETAILdetail/{$ARG_ARTICLE_ID}// 参数路由fundetailRoute(articleId:Int):Stringdetail/$articleId}路由类型类型示例说明固定路由home无参数参数路由detail/{articleId}路径参数查询路由detail?tab1URL 参数4.2 导航图 AppNavGraphComposablefunAppNavGraph(){valnavControllerrememberNavController()NavHost(navControllernavController,startDestinationAppRoutes.HOME,// 起始页面){composable(AppRoutes.HOME){HomePage(navController)}composable(AppRoutes.PROFILE){ProfilePage(navController)}composable(routeAppRoutes.DETAIL,// detail/{articleId}argumentslistOf(navArgument(AppRoutes.ARG_ARTICLE_ID){typeNavType.IntType})){backStackEntry-valarticleIdbackStackEntry.arguments?.getInt(AppRoutes.ARG_ARTICLE_ID)?:0DetailPage(navControllernavController,articleIdarticleId)}}}关键点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 linkNavHost(navControllernavController,startDestinationAppRoutes.HOME,){/* ... */}startDestination应用启动时的第一个页面deep link可被外部调用的链接如https://myapp.com/detail/1234.6 导航最佳实践实践说明路由常量化避免魔法字符串用 object 管理参数类型声明NavType.IntType / StringType / FloatType回退时清栈popUpTo可控制返回栈key 唯一性重复进入同一页面用不同 key 区分示例返回时清空整个栈从详情页返回直接到首页navController.navigate(AppRoutes.HOME){popUpTo(AppRoutes.HOME){inclusivetrue}}4.7 总结AppRoutes 统一管理路由常量NavHost composable 注册页面navigate() 执行跳转popBackStack() 返回arguments 声明参数backStackEntry 获取参数通过函数参数层层传递到 ViewModel上一章第三章MVVM 架构与 ViewModel 下一章第五章数据层 — 网络请求与 Repository
