Jetpack Compose中OutlinedTextField输入不更新问题求助

安全阿岳

2026-8-15

修复Jetpack Compose中修改data class属性不触发UI更新的问题

问题原因

你通过mutableStateOf(City(...))创建的状态，Compose仅监听对象引用的变化。直接修改city.name只是改变了对象内部属性值，并未改变city对象的引用，因此Compose不会触发重组，UI也就无法更新。
而temp是mutableStateOf<String>，每次赋值temp = it都会生成新的字符串实例（String不可变），改变了状态的引用，所以能正常触发UI更新。

修复方案

推荐采用不可变状态更新的方式（符合Jetpack Compose最佳实践），具体修改如下：

方式一：创建新的City对象替换旧实例

修改HelloScreen中HelloContent的调用代码，通过copy()方法生成新的City对象：

HelloContent(
    name = city.name,
    onNameChange = { newName ->
        city = city.copy(name = newName) // 生成新对象，改变状态引用
    }
)

每次输入时都会创建新的City实例，mutableStateOf检测到引用变化后，会自动触发Compose重组，UI就能实时更新输入内容，同时rememberSaveable也能正常保留配置变更后的状态。

方式二：将City的name设为可观察状态（适合特殊场景）

如果需要单独监听name属性的变化，可以修改City类，让name成为MutableState类型：

data class City(
    val name: MutableState<String>,
    val country: String
)

然后更新初始化和状态更新逻辑：

// HelloScreen中的初始化
var city by rememberSaveable(stateSaver = CitySaver) {
    mutableStateOf(City(mutableStateOf("Hanoi"), "VietNam"))
}

// HelloContent调用
HelloContent(
    name = city.name.value,
    onNameChange = { city.name.value = it }
)

// 更新CitySaver以适配MutableState
val CitySaver = run {
    val nameKey = "Name"
    val countryKey = "Country"
    mapSaver(
        save = { mapOf(nameKey to it.name.value, countryKey to it.country) },
        restore = { City(mutableStateOf(it[nameKey] as String), it[countryKey] as String) }
    )
}