Compose | UI组件(十四) | Navigation-Data - 页面导航传递数据

最新推荐文章于 2025-06-04 10:33:56 发布

原创

最新推荐文章于 2025-06-04 10:33:56 发布

· 3k 阅读

29 ·

版权

文章标签：

#Compose #Navigation #传参

本文详细介绍了在AndroidCompose中使用Navigation组件时，如何通过NavController和NavHost传递参数，包括普通方式的URL查询参数、结合ViewModel的状态管理以及通过Parcelable传递复杂对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在 Compose 中使用 Navigation 组件进行页面跳转时，可以使用 NavController 和 NavHost 来传递参数。

传参流程

使用 NavController 传递参数：

NavController 是 Navigation 组件的核心类，用于控制页面导航。你可以在 NavController 中使用
navigate() 方法传递参数。这些参数可以在目标页面中通过参数名称获取并使用。

例如：

navController.navigate("SecondScreen") {
     
    // 传递参数  
    arguments = remember {
    mutableStateOf("key") }  
    arguments?.putString("key", "value")  
}

在目标页面中，可以通过 arguments 参数获取传递的参数：

val value = arguments?.getString("key") ?: "default value"

使用 NavHost 传递参数：

在 NavHost 中，可以使用 composable() 函数定义导航路径和参数。在 composable()
函数中，可以指定传递的参数和接收参数的方法。

例如：

NavHost(navController = navController, startDestination = "MainScreen") {
     
    composable("MainScreen") {
    MainScreen(arguments = listOf("value1", "value2")) }  
    composable("SecondScreen") {
    SecondScreen(arguments = listOf("value3", "value4")) }  
}

在目标页面中，可以通过 arguments 参数获取传递的参数：

val values = arguments[0] + arguments[1] // value1value2 for MainScreen, value3value4 for SecondScreen

这些是在 Compose 中使用 Navigation 组件进行参数传递的一些常见方法。具体实现可能因不同的平台、框架或技术而有所差异。

实例说明

下面使用登录页面传入用户名和密码，到详情页面，做为讲解案例

普通方式传值

就是通过（状态）State 控制变量的传值

定义接受参数格式

object Detail:Screen(route = "$DETAIL?id={id},name={name},password={password}")

注：$DETAIL?id={id},name={name},password={password} 改为 $DETAIL/id={id},name={name},password={password}。将 ? 改为 / ，如果没有传值，程序就会崩溃，/ 默认是必填的，? 默认是选填的

定义接受参数类型

composable(route = Screen.Detail.route,
           arguments = listOf(
                navArgument(DETAIL_ARGUMENT_ID){
   
                    type = NavType.IntType
                    defaultValue = 0
                }