Compose中导航跳转的实现NavHost

1、添加依赖

// build.gradle
dependencies {implementation "androidx.navigation:navigation-compose:2.7.7" // 使用最新版本implementation "com.google.accompanist:accompanist-navigation-animation:0.32.0" // 动画扩展
}

2、两个页面导航跳转的实现

自定义两个页面，分别是HomeScreen() 和 DetailScreen(), 设置初始页面为HomeScreen()，从页面HomeScreen()中跳转到HomeScreen()，先介绍无参数的跳转。

2.1 定义导航图

使用密封类定义路由常量，保证一个常量，防止写错的情况。

// 定义路由常量（推荐使用密封类）
sealed class Screen(val route: String) {data object Home : Screen("home")data object Detail : Screen("detail")
}

2.2 创建导航控制器

设置导航控制器，将HomeScree作为首页

@Composable
fun AppNavigation() {val navController = rememberNavController()NavHost(navController = navController,startDestination = Screen.Home.route,// 添加共享元素动画enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Left) },exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Right) }) {composable(Screen.Home.route) { //自定义页面HomeScreen(navController) }composable(Screen.Detail.route) { //自定义页面DetailScreen(navController)}}
}

2.3 实现两个页面跳转

第一个Home页面显示：

AppNavigation()

跳转到第二个Detail页面中：

navController.navigate(Screen.Detail.route)

2、带参数的导航

2.1 定义带参数的路径

创建一个生成实际路由的方法，替换占位符

sealed class Screen {data  object Detail : Screen("detail/{id}") {// 创建一个实际路由的方法，替换占位符fun createRoute(id: String) = "detail/$id"}
}

2.2 定义接收参数

在 NavHost 中定义可组合的屏幕，包括带参数的屏幕

 // 详情屏幕（带参数）composable(route = Screen.Detail.route,arguments = listOf(navArgument("id") { type = NavType.StringType // 可选：设置参数是否可为空，默认值等})) { entry ->// 从参数中获取idval id = entry.arguments?.getString("id") ?: "" // 提供默认值防止空DetailScreen(id, navController)}

2.3 导航到带参数的屏幕

使用 createRoute 方法生成实际的路由字符串。

navController.navigate(Screen.Detail.createRoute("123"))

3、关键点

NavHost组件

val navController = rememberNavController()NavHost(navController, startDestination = "home") {composable("home") { HomeScreen() }}