Jetpack Compose按钮点击后文本未自动更新，如何实现UI刷新

问题原因 #

Jetpack Compose的UI更新完全依赖可观察状态——只有当状态发生变化时，Compose才会自动触发对应UI的重组更新。你当前传入Counter组件的name是普通Int值，它的变化无法被Compose感知，所以即使数值增加了，UI也不会同步更新。

解决方案 #

使用Compose提供的状态容器来管理计数，让数值变化能被Compose追踪：

1. 用remember + mutableStateOf创建可观察状态：mutableStateOf会生成一个可观察的状态对象，remember确保状态在组件重组时不会被重置。
2. 状态提升：将状态放在父组件中管理，子组件Counter只负责接收状态值并渲染UI，修改状态的逻辑由父组件处理。

完整代码示例 #

@Composable
fun CounterScreen() {
    // 创建可观察的计数状态，初始值为0
    val count = remember { mutableStateOf(0) }

    Column(verticalArrangement = Arrangement.spacedBy(16.dp), padding = 16.dp) {
        // 将状态的当前值传递给Counter组件
        Counter(name = count.value)
        
        // 点击按钮时修改状态值，触发UI重组
        Button(onClick = { count.value += 1 }) {
            Text(text = "增加")
        }
    }
}

@Composable
fun Counter(name: Int) {
    Text(
        text = "Hello ${name}!2" + name,
        fontSize = 18.sp,
    )
}

关键说明 #

• mutableStateOf：当它的value属性被修改时，Compose会自动检测到变化，并重新渲染所有使用该状态的UI部分。
• remember：用于在Composable的多次重组中保留状态实例，避免每次重组都重置数值。
• 状态提升是Compose的核心设计思想之一，能让状态的管理更清晰，也方便在多个组件间共享状态。

内容的提问来源于stack exchange，提问作者Kyu-Ho Hwang