Kotlin Jetpack Compose实现点击表格行在卡片展示对应data class数据

这个需求完全可以实现，你遇到的问题是点击事件的绑定逻辑错误导致的：

• 你将弹窗开关openModule的更新逻辑绑定在了整行的点击事件上，但选中数据selectedRow的更新逻辑却绑定在了行内每个文本控件的单独点击事件上。
• 当你点击行的空白区域时，只会触发整行点击事件修改openModule，不会更新selectedRow；只有点击文本区域时才会更新选中数据，所以才会出现必须先点文本再点行才能展示卡片的问题。

修改步骤 #

1. 移除所有行内Text控件的单独clickable修饰符
2. 将selectedRow赋值和openModule开关修改的逻辑都放在整行的clickable回调中
3. 简化卡片显示的非空判断逻辑

修改后的核心代码 #

列表行实现部分 #

items(resList) { item ->
    Divider(color = Color.LightGray, thickness = 1.dp)
    Row(
        Modifier
            .fillMaxWidth()
            .clickable { 
                // 点击行时同时更新选中数据和弹窗开关
                selectedRow = item
                openModule.value = true 
            },
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text(
            text = "${item.name} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
        Text(
            text = "${item.upVal} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
        Text(
            text = "${item.downVal} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
        Text(
            text = "${item.latency} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
        Text(
            text = "${item.video} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
        Text(
            text = "${item.MOS} ",
            Modifier.padding(8.dp),
            color = Color.White,
            fontSize = 20.sp
        )
    }
}

卡片显示逻辑优化 #

// 简化非空判断
if (openModule.value && selectedRow != null) {
    Card(
        modifier = Modifier.fillMaxSize()
    ) {
        Column {
            selectedRow?.let {
                Text(text = "Latitude: ${it.latitude}")
                Text(text = "Longitude: ${it.longitude}")
            }
        }
    }
}

额外优化建议 #

如果需要点击卡片外区域关闭卡片，可以给Card加上点击事件将openModule.value设为false，也可以新增关闭按钮方便用户操作。

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