Android Jetpack Compose：可变状态变更后Composable未重组问题

你的问题根源在于用三个独立布尔变量管理选中状态，极易出现状态不同步，再加上Pager的页面复用机制，导致旧页面的UI无法及时刷新。更简洁可靠的方式是用单个变量记录当前选中的类型，替代多布尔值的分散管理。

优化后的代码实现 #

1. 替换三个布尔变量为单个状态变量：

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

2. 修改Card的边框颜色判断与点击逻辑：

Card(
    shape = RoundedCornerShape(70.dp),
    border = BorderStroke(
        1.2.dp,
        // 先获取当前页面对应的类型
        val currentType = when (page) {
            0 -> StationType.PEDESTRIAN
            1 -> StationType.PASSENGER_CAR
            2 -> StationType.CYCLIST
            else -> StationType.PEDESTRIAN
        }
        // 直接判断当前类型是否为选中状态
        if (selectedStationType == currentType) Color.Green else Color.DarkGray
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 12.dp),
    onClick = {
        val currentType = when (page) {
            0 -> StationType.PEDESTRIAN
            1 -> StationType.PASSENGER_CAR
            2 -> StationType.CYCLIST
            else -> StationType.PEDESTRIAN
        }
        // 点击时直接设置选中类型，自动覆盖旧状态
        selectedStationType = currentType
        // 保留原有的其他业务逻辑...
    }
)

解决原理 #

• 单个状态变量避免了多布尔值的同步漏洞，每次选中新类型时，旧类型的选中状态会自动失效
• 所有Card的边框颜色直接依赖同一个状态变量，状态变化时Compose会自动刷新所有相关页面的UI，确保旧选中页的边框能及时切回深灰色
• 代码逻辑更简洁，后续扩展更多类型时，仅需修改when分支，无需新增状态变量

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