MutableState对象变更时文本与按钮颜色未更新问题排查

核心问题点 #

1. 状态监听失效：你用mutableStateOf(arrayListOf<String>())创建状态，但ArrayList是可变集合，调用add/remove只会修改集合内容，不会改变对象引用。Compose的状态更新依赖引用变化，所以集合内容变了也不会触发重组，导致按钮颜色和顶部文本都不更新。
2. 文本更新遗漏：在添加颜色的逻辑分支里，没有更新selectedColorsText变量，只有删除时才更新，所以添加颜色时顶部文本不会同步变化。

修复方案 #

1. 用mutableStateListOf替代mutableStateOf(arrayListOf())，它是Compose专门设计的可变列表，内容变化会自动触发重组。
2. 在添加/删除颜色的逻辑后，统一更新selectedColorsText，确保两种操作都能同步文本。
3. 优化排序逻辑，直接基于枚举的自然顺序排序，避免重复遍历枚举值。

修复后的完整代码 #

enum class ColorsEnum(val rawValue: String) {
    red("Red"),
    orange("Orange"),
    yellow("Yellow"),
    green("Green"),
    blue("Blue")
}

@Composable
fun LazyGridView() {
    // 改用mutableStateListOf，内容变化自动触发重组
    val selectedColors = remember { mutableStateListOf<String>() }
    var selectedColorsText by remember { mutableStateOf("") }

    Column(
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        Text("Selected Colors: $selectedColorsText")

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(10.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(ColorsEnum.values()) { color ->
                Button(
                    onClick = {
                        val colorValue = color.rawValue
                        if (selectedColors.contains(colorValue)) {
                            selectedColors.remove(colorValue)
                        } else {
                            selectedColors.add(colorValue)
                            // 基于枚举顺序排序，更高效
                            selectedColors.sortBy { name ->
                                ColorsEnum.values().indexOfFirst { it.rawValue == name }
                            }
                        }
                        // 统一更新文本，覆盖添加/删除两种场景
                        selectedColorsText = selectedColors.joinToString(", ")
                        Log.d("selectedColors = ", "$selectedColors")
                        Log.d("selectedColorsText = ", "$selectedColorsText")
                    },
                    modifier = Modifier
                        .border(
                            width = 1.dp,
                            color = Color.Black,
                            shape = RoundedCornerShape(5.dp)
                        ),
                    colors = ButtonDefaults.buttonColors(
                        backgroundColor = if (isSystemInDarkTheme()) {
                            if (selectedColors.contains(color.rawValue)) Color.White else Color.Black
                        } else {
                            if (selectedColors.contains(color.rawValue)) Color.Black else Color.White
                        }
                    )
                ) {
                    Text(
                        text = color.rawValue,
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            color = if (isSystemInDarkTheme()) {
                                if (selectedColors.contains(color.rawValue)) Color.Black else Color.White
                            } else {
                                if (selectedColors.contains(color.rawValue)) Color.White else Color.Black
                            }
                        )
                    )
                }
            }
        }
    }
}

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