Jetpack Compose列表项点击跳转对应详情页的问题排查与解决

核心问题是所有列表项点击后都传递了同一个固定值（第一个item的title），导致详情页始终加载第一个数据。具体原因：

• HomeContentScreen中默认初始化accountType为列表第一个item的title，并且在给SecondBodyGrid的回调里，不管点击哪个列表项，都固定传递homeInfo.title（也就是第一个item的title）。
• 多层Composable的回调参数类型不统一，从SecondBodyElement的(Int)到SecondBodyGrid的(Int)再到HomeContentScreen的(String)，逻辑混乱，没有正确传递当前点击项的唯一标识。

1. 统一回调参数，传递正确的item标识 #

从最底层的SecondBodyElement传递当前点击项对应的HomeInfoData的title，统一回调参数类型为String。

修改SecondBodyElement #

@Composable
fun SecondBodyElement(
    @StringRes text: Int,
    @DrawableRes drawable: Int,
    modifier: Modifier = Modifier,
    // 统一回调参数为String，传递对应的title
    onHomeCardClick: (String) -> Unit,
    // 新增参数：当前item对应的HomeInfoData的title
    itemTitle: String
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 10.dp,
        modifier = modifier
            .padding(horizontal = 12.dp, vertical = 12.dp)
            .clip(RoundedCornerShape(8.dp))
            // 点击时传递当前item的title
            .clickable { onHomeCardClick(itemTitle) }
    ) {
        Column(horizontalAlignment = Alignment.Start) {
            Image(
                painter = painterResource(drawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(300.dp)
            )
            Text(
                text = stringResource(text),
                style = MaterialTheme.typography.h3,
                maxLines = 3,
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 16.dp)
            )
        }
    }
}

2. 修改SecondBodyGrid，传递正确的item信息 #

遍历SecondBodyData时，匹配对应的HomeInfoData的title，传递给SecondBodyElement：

@Composable
fun SecondBodyGrid(
    // 统一回调参数为String
    onHomeCardClick: (String) -> Unit = {},
) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(1),
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.height(1450.dp)
    ) {
        items(SecondBodyData) { item ->
            // 匹配当前item对应的HomeInfoData的title
            val itemTitle = HomeInfoModel.homeInfoModelList.first { 
                it.title == stringResource(item.text) 
            }.title
            SecondBodyElement(
                onHomeCardClick = onHomeCardClick,
                drawable = item.drawable,
                text = item.text,
                itemTitle = itemTitle,
                modifier = Modifier.height(380.dp)
                // 移除重复的clickable，避免事件冲突
            )
        }
    }
}

3. 修复HomeContentScreen的回调逻辑 #

去掉默认的accountType初始化，直接传递点击项的title到上层导航回调：

@Composable
fun HomeContentScreen(
    modifier: Modifier = Modifier,
    onHomeCardClick: (String) -> Unit,
    // 移除默认的accountType参数，无需提前初始化
) {
    Column(
        modifier
            .verticalScroll(rememberScrollState())
            .padding(vertical = 16.dp)
    ) {
        HomeQuote()
        HomeTitleSection(title = R.string.favorite_collections) {
            // 直接传递点击项的title到导航回调
            SecondBodyGrid { clickedTitle ->
                onHomeCardClick(clickedTitle)
            }
        }
    }
}

4. 优化HomeInfoModel的容错性（可选） #

避免找不到匹配项时崩溃：

fun getHomeInfo(accountName: String?): HomeInfoData {
    return homeInfoModelList.firstOrNull { it.title == accountName } 
        ?: homeInfoModelList.first() // 找不到时返回第一个，也可按需抛出异常
}

5. 确认导航参数配置正确 #

确保HomeInfoDestination的路由参数配置无误：

object HomeInfoDestination {
    const val route = "home_info"
    const val accountTypeArg = "account_type"
    val routeWithArgs = "$route/{$accountTypeArg}"
    val arguments = listOf(
        navArgument(accountTypeArg) { type = NavType.StringType }
    )
}

完成以上修改后，点击每个列表项时会正确传递对应HomeInfoData的title到导航参数中，详情页HomeInfoScreen会根据该title加载对应数据，解决所有点击都跳转到第一个详情页的问题。

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