Compose中LazyColumn单选卡片仅高亮选中项的问题

你的问题核心在于每个列表项独立维护选中状态：每个SurahListItem都有自己的selectedCard状态，彼此完全隔离，导致选中新卡片时，旧卡片的状态不会被重置，最终出现多个高亮卡片的情况。

要实现单选高亮，需要把选中状态提升到父组件统一管理，具体实现步骤如下：

1. 在LazyColumn所在的父组件中，定义状态变量记录当前选中项的唯一标识（比如ItemData_quran的id字段，假设你的数据类包含该字段）
2. 给SurahListItem传递当前选中标识，以及点击回调用于更新选中状态
3. SurahListItem根据自身是否匹配选中标识，动态设置背景色

修改后的完整代码如下：

父组件（LazyColumn所在位置） #

// 假设ItemData_quran有唯一标识字段surahId
var selectedSurahId by remember { mutableStateOf<Int?>(null) }

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
    items(sql_quran) { item ->
        SurahListItem(
            quran_einzeln = item,
            navController = navController,
            isSelected = selectedSurahId == item.surahId,
            onItemClick = { selectedSurahId = item.surahId }
        )
    }
}

子组件（SurahListItem） #

@Composable
fun SurahListItem(
    quran_einzeln: ItemData_quran,
    navController: NavController,
    isSelected: Boolean,
    onItemClick: () -> Unit
) {
    val cardColor = if (isSelected) Blue else White

    Card(
        modifier = Modifier
            .padding(horizontal = 8.dp, vertical = 8.dp)
            .fillMaxWidth(),
        elevation = 2.dp,
        shape = RoundedCornerShape(16.dp),
        backgroundColor = cardColor,
        onClick = onItemClick
    ) {
        // 卡片内部内容（如经文名称、编号等）
    }
}

关键说明 #

• 状态提升是Compose跨组件状态管理的核心模式，通过父组件统一控制选中状态，确保所有列表项共享同一状态源
• 如果ItemData_quran没有单独的id字段，也可以直接用对象本身作为选中标识（需保证数据类正确实现equals和hashCode方法）
• 点击新卡片时，父组件的selectedSurahId会更新为新项的标识，所有列表项会重新计算isSelected值，自动取消旧卡片的高亮状态

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