Jetpack Compose中值变更时文本颜色未同步更新问题求助

你代码里的pairButtonColor通过remember创建，但没有关联selectedIndexOfAvailableItem的状态变化。默认的remember不会自动追踪内部引用的状态变量，所以当selectedIndexOfAvailableItem更新时，颜色值不会重新计算。

只需让remember感知到selectedIndexOfAvailableItem的变化，有两种实现方式：

方式一：使用derivedStateOf #

derivedStateOf专门用于基于其他状态计算派生值，会自动追踪依赖的状态变化：

@Composable
fun PairStateFul() {
    var selectedIndexOfAvailableItem by remember { mutableStateOf(-1) }
    val pairButtonColor by remember {
        derivedStateOf {
            if (selectedIndexOfAvailableItem != -1) {
                Color.Blue
            } else {
                Color.Yellow
            }
        }
    }
    Column {
        PairStateLess(
            pairButtonColor,
            selectedIndexOfAvailableItem,
            onSelectedIndexOfAvailableItem = { selectedIndexOfAvailableItem += it }
        )
    }
}

方式二：给remember添加依赖参数 #

在remember的括号里传入selectedIndexOfAvailableItem作为依赖，当依赖值变化时，remember会重新执行代码块计算新的颜色：

@Composable
fun PairStateFul() {
    var selectedIndexOfAvailableItem by remember { mutableStateOf(-1) }
    val pairButtonColor = remember(selectedIndexOfAvailableItem) {
        if (selectedIndexOfAvailableItem != -1) {
            Color.Blue
        } else {
            Color.Yellow
        }
    }
    Column {
        PairStateLess(
            pairButtonColor,
            selectedIndexOfAvailableItem,
            onSelectedIndexOfAvailableItem = { selectedIndexOfAvailableItem += it }
        )
    }
}

两种方式都能实现selectedIndexOfAvailableItem变更时，pairButtonColor同步更新，进而让文本颜色跟着变化。

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