Android Jetpack Compose：可组合函数在可变状态更改后不会重新组合

Question

我有一个由卡片组成的寻呼机，我想用一个布尔变量控制每张卡片的边框：如果该变量为真，则为绿色，否则为深灰色。

        var isPedestrianSelected by remember { mutableStateOf(false) }
        var isCyclistSelected by remember { mutableStateOf(false) }
        var isCarSelected by remember { mutableStateOf(false) }

        Card(
            shape = RoundedCornerShape(70.dp),
            border = BorderStroke(
                1.2.dp,
                when (page) {
                    0 -> { if (isPedestrianSelected) Color.Green else Color.DarkGray }
                    1 -> { if (isCarSelected) Color.Green else Color.DarkGray }
                    2 -> { if (isCyclistSelected) Color.Green else Color.DarkGray }
                    else -> { Color.DarkGray }
                }
            ),
            elevation = CardDefaults.cardElevation(
                defaultElevation = 12.dp
            ),
            onClick = {
                val stationType = when (page) {
                   0 -> StationType.PEDESTRIAN
                   1 -> StationType.PASSENGER_CAR
                   2 -> StationType.CYCLIST
                   else -> { StationType.PEDESTRIAN }
                }
                when (stationType) {
                    StationType.PEDESTRIAN -> {
                        isPedestrianSelected = true
                        isCarSelected = false
                        isCyclistSelected = false
                    }
                    StationType.PASSENGER_CAR -> {
                        isPedestrianSelected = false
                        isCarSelected = true
                        isCyclistSelected = false
                    }
                    StationType.CYCLIST -> {
                        isPedestrianSelected = false
                        isCarSelected = false
                        isCyclistSelected = true
                    }
                    else -> {}
                }
                ...
            },

问题：当布尔变量（例如 isCarSelected）设置为 true 时，边框的颜色正确（绿色），但是当它返回 false 时，边框不会改变（尽管我希望它们会变回原来的颜色）深灰色）。

感谢您的帮助

编辑：也许我可以更好地解释。我的目的是寻呼机的最多一张卡片有绿色边框，所以我的代码应该做的是，如果我选择一个页面，然后在该页面的卡片周围放置一个绿色边框，并删除其他页面的卡片周围的所有绿色边框页。示例：isCarSelected = true，因此第 1 页的卡片设置为绿色边框。滚动寻呼机后，我单击另一个页面，例如第 0 页，这会将 isPedestrianSelected=true 和其他布尔值设置为 false，例如 isCarSelected = false，这会将第 1 页的颜色从绿色变为深灰色（同时将第 0 页）颜色从深灰色到绿色）。但由于某种原因这并没有发生。

Answer 1

按照您当前的代码，在您第一次在一页上单击卡片后，

Card

将始终是

Color.Green

边框。原因是当您在

page = 0

上并单击卡片时，您设置了

isPedestrianSelected = true

。当您再次点击同一页面时，您将再次设置

isPedestrianSelected = true

。
所以它不可能在同一页面上获得

false

。

再次单击时，您可能想切换变量。按如下方式更新您的代码：

when (stationType) {
    StationType.PEDESTRIAN -> {
        isPedestrianSelected = !isPedestrianSelected 
        isCarSelected = false
        isCyclistSelected = false
    }
    StationType.PASSENGER_CAR -> {
        isPedestrianSelected = false
        isCarSelected = !isCarSelected
        isCyclistSelected = false
    }
    StationType.CYCLIST -> {
        isPedestrianSelected = false
        isCarSelected = false
        isCyclistSelected = !isCyclistSelected
    }
    else -> {}
}

Answer 2

原因是在您的

onClick

函数中，您只能将目标值设置为 true 而不能设置为 false。

这应该有效：

when (stationType) {
    StationType.PEDESTRIAN -> {
        isPedestrianSelected = if(isPedestrianSelected) false else true
        isPedestrianSelected = true
        isCarSelected = false
        isCyclistSelected = false
    }
    StationType.PASSENGER_CAR -> {
        isPedestrianSelected = false
        isCarSelected = if(isCarSelected) false else true
        isCyclistSelected = false
    }
    StationType.CYCLIST -> {
        isPedestrianSelected = false
        isCarSelected = false
        isCyclistSelected = if(isCyclistSelected) false else true
    }
    else -> {}
}

但是，我相信您可以通过维护一个可为空的可变状态来整体改进代码，该状态在单击时更新，其中 null 表示未选择。

var selectedStationType: StationType? by remember { mutableStateOf(null) }