如何修改Jetpack Compose列表生成可组合项的选中状态

你当前的实现有两个核心问题：

• 所有CustomView共用了同一个MutableState<Boolean>类型的选中状态，本质上没有区分具体哪个列表项被选中
• 选中状态完全封装在CustomView的内部点击逻辑里，Card内其他区域的点击事件没有和选中状态做关联，自然无法触发竖条颜色重置
  之前尝试给列表项加isSelected属性不生效，是因为普通的字段不是Compose可观察的状态，修改后不会触发重组刷新UI。

按照Compose状态提升的原则，把选中状态上移到Card层级统一管理，不要在CustomView内部维护选中态，具体实现如下：

1. 替换原来的单个布尔值状态，改为存储当前选中项的唯一标识（比如itemId），默认值为null代表无选中项，天然保证同一时间只有一个项被选中
2. 给Card根容器添加点击事件，点击非列表项区域时清空选中状态
3. 给每个CustomView添加点击事件，阻止点击事件冒泡到父容器，点击时更新选中项id
4. 通过判断当前项id和选中id是否相等，给CustomView传入isPressed参数

参考代码：

// 状态上移到Card层级，存储当前选中的item唯一标识
val selectedItemId = remember { mutableStateOf<String?>(null) }

Card(
    modifier = Modifier
        .fillMaxWidth()
        // 监听Card整体点击
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            // 点击Card其他区域时，清空选中状态
            selectedItemId.value = null
        }
) {
    Row(
        modifier = Modifier.padding(16.dp)
    ) {
        list.forEach { item ->
            CustomView(
                isPressed = selectedItemId.value == item.id,
                modifier = Modifier.clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = null
                ) {
                    // 点击当前竖条时，切换选中状态：已选中则置空，未选中则设为当前id
                    selectedItemId.value = if (selectedItemId.value == item.id) null else item.id
                }
            )
        }

        // 其他文本内容正常放置即可
        // Text(...)
    }
}

• 如果你的CustomView内部已经写了点击逻辑，把内部修改选中状态的代码删掉，完全由外层传入的isPressed控制UI，避免状态不一致
• 如果确实要在item数据类中加选中字段，需要用mutableStateOf包裹字段，保证修改是可观察的，否则Compose无法感知变更刷新UI，示例：

  data class ListItem(
      val id: String,
      val content: String,
      var isSelected: MutableState<Boolean> = mutableStateOf(false)
  )
  

  但这种方案需要在点击其他区域时遍历列表把所有项的isSelected设为false，不如存选中id的方案简洁。

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