前言前面写的都是单页Compose页面真实App拥有多个页面导航跳转、回退栈、页面之间传参是必不可少。Jetpack Navigation Compose是官方导航组件基于回退栈管理页面支持页面路由、参数传递、深层链接。本节课学习NavHost、NavController、路由定义、页面跳转、回退栈、页面之间传递参数。前置依赖dependencies { implementation androidx.navigation:navigation-compose:2.8.3 }知识点清单NavHost导航宿主放置所有路由页面NavController导航控制器执行跳转、返回、操作回退栈路由字符串route导航到目标页面popBackStack回退页面之间传递参数必选路径参数可选查询参数回退栈操作popUpTo跳转的时候清理回退栈登录完成之后回到首页销毁登录页完整示例源码importandroidx.compose.foundation.layout.Arrangementimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.fillMaxSizeimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.ui.Alignmentimportandroidx.compose.ui.Modifierimportandroidx.navigation.NavHostControllerimportandroidx.navigation.NavTypeimportandroidx.navigation.compose.NavHostimportandroidx.navigation.compose.composableimportandroidx.navigation.compose.rememberNavControllerimportandroidx.navigation.navArgument//路由常量集中管理路由名称objectAppRoute{constvalHOMEhomeconstvalDETAILdetail/{articleId}}ComposablefunNavDemoPage(){valnavController:NavHostControllerrememberNavController()NavHost(navControllernavController,startDestinationAppRoute.HOME){composable(routeAppRoute.HOME){HomeScreen(navController)}composable(routeAppRoute.DETAIL,argumentslistOf(navArgument(articleId){typeNavType.IntType})){backStackEntry-valarticleIdbackStackEntry.arguments?.getInt(articleId)?:-1DetailScreen(navController,articleId)}}}ComposablefunHomeScreen(navController:NavHostController){Column(modifierModifier.fillMaxSize(),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(text首页页面)Button(onClick{//跳转详情传递id1001拼接路径参数navController.navigate(detail/1001)}){Text(跳转文章详情(id:1001))}Button(onClick{navController.navigate(detail/2002)}){Text(跳转文章详情(id:2002))}}}ComposablefunDetailScreen(navController:NavHostController,articleId:Int){Column(modifierModifier.fillMaxSize(),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(text详情页面文章ID:$articleId)Button(onClick{navController.popBackStack()}){Text(←返回上一页)}Button(onClick{//跳转到首页并且把回退栈中首页之上全部页面弹出适合登录后跳转首页navController.navigate(AppRoute.HOME){popUpTo(AppRoute.HOME){inclusivefalse}}}){Text(回到首页清理上层页面)}}}逐行解读NavControllerrememberNavController() 创建导航控制器实例核心对象负责发起 navigate() 跳转 popBackStack() 回退操作回退栈。不要在ViewModel持有NavControllerViewModel有可能比导航组件生命周期更长会造成内存泄漏。导航控制器只允许在Compose UI层使用。NavHostNavHost是导航宿主容器 startDestination 指定应用启动默认显示的路由页面。内部使用 composable(route) 注册每一条路由每一条对应一个页面。路径参数传递 detail/{articleId}route字符串中使用 {参数名} 声明占位然后通过 navArgument 定义参数类型跳转的时候拼接实际值 navController.navigate(“detail/1001”) 目标页面从 backStackEntry.arguments 取出参数。popUpTo inclusive清理回退栈navController.navigate(AppRoute.HOME){popUpTo(AppRoute.HOME){inclusivefalse}}inclusivefalse保留popUpTo指定的那一页把它之上的页面全部出栈inclusivetrue连popUpTo目标页面本身一并弹出适合登录跳转后销毁登录页面。查询参数写法?keyvalue除了路径参数 detail/{id} 还可以使用url风格查询参数 detail?articleId123titlehello 适合可选参数。容易踩坑❌ 在ViewModel保存NavControllerViewModel生命周期长于导航页面引发内存泄漏。❌ 硬编码路由字符串到处写建议统一放到AppRoute常量对象集中维护路由名字。❌ popUpTo inclusive值写错登录页跳转首页之后按返回键又回到登录页没有销毁登录页。✅ rememberNavController获取控制器NavHost注册全部路由backStackEntry获取页面参数popUpTo清理回退栈。多元化习题练习习题1【基础‑改错题】把NavController保存进ViewModel里面会带来什么隐患答案ViewModel生命周期有可能长于导航页面NavController依附于Compose导航宿主页面销毁之后ViewModel还持有该引用会造成严重的内存泄漏NavController只允许UI层使用。解读如果ViewModel需要触发导航建议UI层定义导航回调由UI执行跳转。习题2【基础‑代码修改题】新增路由user/{userId}userId是Long类型写出composable当中navArgument的参数配置片段。答案argumentslistOf(navArgument(userId){typeNavType.LongType})解读声明参数类型后续跳转拼接实际Long数字目标页面从backStackEntry取出userId。习题3【进阶‑补充代码题】登录页面login登录成功之后跳转到首页home并且销毁登录页面按返回键不可以回到登录页写出navigate跳转lambda里面popUpTo代码。答案navController.navigate(AppRoute.HOME){popUpTo(login){inclusivetrue}}解读inclusivetrue把login页面本身一并弹出回退栈返回键直接退出App不会回到登录界面。习题4【综合‑逻辑应用题】页面传参有路径参数 detail/{id} 和查询参数 detail?idxxx 简单分析分别适合什么场景。答案路径参数该页面必须要这个数据属于页面必不可少比如文章详情必须要有articleId查询参数用于可选参数该参数可以不传页面需要做判空处理。解读必选优先路径占位参数可选优先url查询参数。习题5【概念简答题】NavHost的startDestination作用是什么答案startDestination用来指定NavHost初始化之后回退栈里面默认加载显示的初始路由页面App打开导航宿主之后首先展示该页面。解读相当于导航的启动首页。本节课知识点总结rememberNavController获取NavController导航控制器只在UI层使用禁止存入ViewModel。NavHost作为导航宿主startDestination设置起始页面内部composable注册各个页面路由。路径参数route定义 {paramName} 占位跳转拼接实际值目标页面从backStackEntry取出参数。popUpTo配合inclusive清理回退栈inclusivetrue会把目标路由页面也弹出适合登录之后销毁登录页。路由字符串建议统一常量对象维护减少硬编码字符串错误页面传参分为路径参数必选和查询参数可选。下一课预告进阶第11课ViewModel保存状态SavedStateHandle页面重建旋转屏幕状态保存
前言前面写的都是单页Compose页面真实App拥有多个页面导航跳转、回退栈、页面之间传参是必不可少。Jetpack Navigation Compose是官方导航组件基于回退栈管理页面支持页面路由、参数传递、深层链接。本节课学习NavHost、NavController、路由定义、页面跳转、回退栈、页面之间传递参数。前置依赖dependencies { implementation androidx.navigation:navigation-compose:2.8.3 }知识点清单NavHost导航宿主放置所有路由页面NavController导航控制器执行跳转、返回、操作回退栈路由字符串route导航到目标页面popBackStack回退页面之间传递参数必选路径参数可选查询参数回退栈操作popUpTo跳转的时候清理回退栈登录完成之后回到首页销毁登录页完整示例源码importandroidx.compose.foundation.layout.Arrangementimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.fillMaxSizeimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.ui.Alignmentimportandroidx.compose.ui.Modifierimportandroidx.navigation.NavHostControllerimportandroidx.navigation.NavTypeimportandroidx.navigation.compose.NavHostimportandroidx.navigation.compose.composableimportandroidx.navigation.compose.rememberNavControllerimportandroidx.navigation.navArgument//路由常量集中管理路由名称objectAppRoute{constvalHOMEhomeconstvalDETAILdetail/{articleId}}ComposablefunNavDemoPage(){valnavController:NavHostControllerrememberNavController()NavHost(navControllernavController,startDestinationAppRoute.HOME){composable(routeAppRoute.HOME){HomeScreen(navController)}composable(routeAppRoute.DETAIL,argumentslistOf(navArgument(articleId){typeNavType.IntType})){backStackEntry-valarticleIdbackStackEntry.arguments?.getInt(articleId)?:-1DetailScreen(navController,articleId)}}}ComposablefunHomeScreen(navController:NavHostController){Column(modifierModifier.fillMaxSize(),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(text首页页面)Button(onClick{//跳转详情传递id1001拼接路径参数navController.navigate(detail/1001)}){Text(跳转文章详情(id:1001))}Button(onClick{navController.navigate(detail/2002)}){Text(跳转文章详情(id:2002))}}}ComposablefunDetailScreen(navController:NavHostController,articleId:Int){Column(modifierModifier.fillMaxSize(),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(text详情页面文章ID:$articleId)Button(onClick{navController.popBackStack()}){Text(←返回上一页)}Button(onClick{//跳转到首页并且把回退栈中首页之上全部页面弹出适合登录后跳转首页navController.navigate(AppRoute.HOME){popUpTo(AppRoute.HOME){inclusivefalse}}}){Text(回到首页清理上层页面)}}}逐行解读NavControllerrememberNavController() 创建导航控制器实例核心对象负责发起 navigate() 跳转 popBackStack() 回退操作回退栈。不要在ViewModel持有NavControllerViewModel有可能比导航组件生命周期更长会造成内存泄漏。导航控制器只允许在Compose UI层使用。NavHostNavHost是导航宿主容器 startDestination 指定应用启动默认显示的路由页面。内部使用 composable(route) 注册每一条路由每一条对应一个页面。路径参数传递 detail/{articleId}route字符串中使用 {参数名} 声明占位然后通过 navArgument 定义参数类型跳转的时候拼接实际值 navController.navigate(“detail/1001”) 目标页面从 backStackEntry.arguments 取出参数。popUpTo inclusive清理回退栈navController.navigate(AppRoute.HOME){popUpTo(AppRoute.HOME){inclusivefalse}}inclusivefalse保留popUpTo指定的那一页把它之上的页面全部出栈inclusivetrue连popUpTo目标页面本身一并弹出适合登录跳转后销毁登录页面。查询参数写法?keyvalue除了路径参数 detail/{id} 还可以使用url风格查询参数 detail?articleId123titlehello 适合可选参数。容易踩坑❌ 在ViewModel保存NavControllerViewModel生命周期长于导航页面引发内存泄漏。❌ 硬编码路由字符串到处写建议统一放到AppRoute常量对象集中维护路由名字。❌ popUpTo inclusive值写错登录页跳转首页之后按返回键又回到登录页没有销毁登录页。✅ rememberNavController获取控制器NavHost注册全部路由backStackEntry获取页面参数popUpTo清理回退栈。多元化习题练习习题1【基础‑改错题】把NavController保存进ViewModel里面会带来什么隐患答案ViewModel生命周期有可能长于导航页面NavController依附于Compose导航宿主页面销毁之后ViewModel还持有该引用会造成严重的内存泄漏NavController只允许UI层使用。解读如果ViewModel需要触发导航建议UI层定义导航回调由UI执行跳转。习题2【基础‑代码修改题】新增路由user/{userId}userId是Long类型写出composable当中navArgument的参数配置片段。答案argumentslistOf(navArgument(userId){typeNavType.LongType})解读声明参数类型后续跳转拼接实际Long数字目标页面从backStackEntry取出userId。习题3【进阶‑补充代码题】登录页面login登录成功之后跳转到首页home并且销毁登录页面按返回键不可以回到登录页写出navigate跳转lambda里面popUpTo代码。答案navController.navigate(AppRoute.HOME){popUpTo(login){inclusivetrue}}解读inclusivetrue把login页面本身一并弹出回退栈返回键直接退出App不会回到登录界面。习题4【综合‑逻辑应用题】页面传参有路径参数 detail/{id} 和查询参数 detail?idxxx 简单分析分别适合什么场景。答案路径参数该页面必须要这个数据属于页面必不可少比如文章详情必须要有articleId查询参数用于可选参数该参数可以不传页面需要做判空处理。解读必选优先路径占位参数可选优先url查询参数。习题5【概念简答题】NavHost的startDestination作用是什么答案startDestination用来指定NavHost初始化之后回退栈里面默认加载显示的初始路由页面App打开导航宿主之后首先展示该页面。解读相当于导航的启动首页。本节课知识点总结rememberNavController获取NavController导航控制器只在UI层使用禁止存入ViewModel。NavHost作为导航宿主startDestination设置起始页面内部composable注册各个页面路由。路径参数route定义 {paramName} 占位跳转拼接实际值目标页面从backStackEntry取出参数。popUpTo配合inclusive清理回退栈inclusivetrue会把目标路由页面也弹出适合登录之后销毁登录页。路由字符串建议统一常量对象维护减少硬编码字符串错误页面传参分为路径参数必选和查询参数可选。下一课预告进阶第11课ViewModel保存状态SavedStateHandle页面重建旋转屏幕状态保存
