Jetpack Compose点击Card内按钮更新LazyColumn高亮正确答案实现方案

实现方案 #

Jetpack Compose 是声明式UI框架，UI更新完全由状态变化驱动，你之前手动调用可组合函数不生效的核心原因是没有触发可观察状态的变更，按如下步骤修改即可实现需求：

步骤1：在Card所在的父可组合项中添加控制状态

新增showAnswer可观察状态，控制是否展示正确答案，点击按钮时修改状态值，并将状态传递给选项列表组件：

// 在Card所在的Composable作用域内新增状态
val showAnswer by remember { mutableStateOf(false) }

// 原有Card代码保持不变，仅修改两处：
// 1. 调用OptionsDetailsList时传入状态
OptionsDetailsList(lstOptions = lstOptions, showAnswer = showAnswer)

// 2. 按钮点击逻辑修改
Button(onClick = {
    showAnswer = true
    // 如果需要支持切换展示/隐藏，可改为 showAnswer = !showAnswer
}) {
    Text(text = "View Answer")
}

步骤2：修改OptionsDetailsList组件，新增状态参数

在列表组件中接收状态参数，遍历选项时根据状态判断是否给正确选项设置特殊颜色：

@Composable
// 新增showAnswer参数
fun OptionsDetailsList(lstOptions: List<CertAnswers>, showAnswer: Boolean){
    Log.d("ListOptions Count" , lstOptions.size.toString())
    LazyColumn(){
        item {
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        }
        items(lstOptions){ item ->
            Text(
                text = item.answer,
                modifier=Modifier.padding(3.dp),
                style = Typography.subtitle1,
                // 新增颜色判断逻辑，正确答案展示为绿色，可自行替换为你需要的颜色
                color = if (showAnswer && item.isSolution) Color.Green else Color.Unspecified
            )
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        }
    }
}

修改完成后，点击「查看答案」按钮会触发showAnswer状态变更，自动触发列表组件重组，正确选项就会显示为指定的特殊颜色。

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