如何实现Jetpack Compose导航参数传递？实践遇阻求助

1. 更新路由定义，添加参数占位符 #

先在目标页面的路由配置中加入参数占位，明确要传递的字段：

object HomeInfoDestination : KetoDestination{
    override val route = "homeInfo"
    // 生成带ID参数的完整路由
    fun createRoute(itemId: Int) = "$route/$itemId"
    // 定义参数键名，用于后续读取
    const val HOME_INFO_ID_KEY = "homeInfoId"
}

2. 修改NavHost配置，接收并解析参数 #

在导航宿主中配置目标页面的参数规则，同时从导航栈中读取参数并匹配对应数据：

NavHost(
    navController = navController,
    startDestination = Home.route,
    modifier = modifier
) {
    composable(route = Home.route) {
        HomeScreen(
            onHomeCardClick = { homeInfo ->
                navController.navigate(HomeInfoDestination.createRoute(homeInfo.id))
            }
        )
    }
    composable(
        route = "${HomeInfoDestination.route}/{${HomeInfoDestination.HOME_INFO_ID_KEY}}",
        arguments = listOf(
            navArgument(HomeInfoDestination.HOME_INFO_ID_KEY) {
                type = NavType.IntType
            }
        )
    ) { backStackEntry ->
        // 读取传递的ID参数
        val itemId = backStackEntry.arguments?.getInt(HomeInfoDestination.HOME_INFO_ID_KEY) ?: -1
        // 根据ID从数据模型中匹配对应条目
        val homeInfo = HomeInfoModel.homeInfoModelList.find { it.id == itemId }
        // 传递数据到目标页面，处理空值情况
        homeInfo?.let {
            HomeInfoScreen(homeInfo = it)
        } ?: run {
            Text(text = "未找到对应信息")
        }
    }
}

3. 调整目标页面，接收并使用参数 #

更新目标页面的组件，让它接收HomeInfo参数并传递给详情组件：

@Composable
fun HomeInfoScreen(homeInfo: HomeInfo){
    WelcomeText()
    HomeInfoDetails(homeInfo = homeInfo)
}

4. 修改源页面，实现带参数的导航逻辑 #

更新源页面的回调参数，让它能传递具体的HomeInfo数据，触发导航时携带ID：

@Composable
fun HomeScreen(onHomeCardClick: (HomeInfo) -> Unit) {
    HomeContentScreen(onHomeCardClick = onHomeCardClick)
}

@Composable
fun HomeContentScreen(
    modifier: Modifier = Modifier,
    onHomeCardClick: (HomeInfo) -> Unit
) {
    Column(
        modifier
            .verticalScroll(rememberScrollState())
            .padding(vertical = 16.dp)) {
        HomeQuote()
        // 遍历数据模型生成卡片，点击时传递对应数据
        HomeInfoModel.homeInfoModelList.forEach { item ->
            Card(
                modifier = Modifier
                    .padding(10.dp)
                    .clickable { onHomeCardClick(item) }
            ) {
                Text(text = item.title)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Edwin