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 ->
        // 从参数中获取id
        val 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() }
        
   }