Jetpack Compose可组合项按钮文本未按预期更新问题

问题表现 #

实现时间选择按钮时，预期用户选中时间后按钮文本自动更新为选中值，实际运行出现不符合预期的表现：

• 单独使用绑定mTime.value的Text组件，文本可正常更新为选中时间
• 同时使用绑定mTime.value、timeState.value.entry的两个Text组件，选中时间后二者均可正常更新
• 单独使用绑定timeState.value.entry的Text组件，文本始终无法更新

可复现代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    TimeCardButton(id = 1, symbol ="In", enabled=true,modifier = Modifier) { entry ->
                        Log.d("click", "$entry result")
                    }
                }
            }
        }
    }
}

data class TimeCardEntry(val id: Int = -1, var entry: String = "")

@Composable
fun TimeCardButton(
    id: Int,
    symbol: String,
    enabled: Boolean = false,
    modifier: Modifier,
    onValueChange: (TimeCardEntry) -> Unit = {},
) {
    val timeState = remember {
        mutableStateOf(TimeCardEntry(id, symbol))
    }

    // 这里的写法也有问题，remember仅首次计算，后续状态更新不会重新执行
    val validState = remember {
        timeState.value.entry.trim().isNotEmpty()
    }

    val mTime = remember { mutableStateOf(symbol) }

    if (enabled) {
        val mContext = LocalContext.current
        val mCalendar = Calendar.getInstance()
        val mHour = mCalendar[Calendar.HOUR_OF_DAY]
        val mMinute = mCalendar[Calendar.MINUTE]

        val mTimePickerDialog = TimePickerDialog(
            mContext,
            { _, mHour: Int, mMinute: Int ->
                // 问题出在这行更新逻辑
                timeState.value.entry = "$mHour:$mMinute"
                mTime.value = "$mHour:$mMinute"
                onValueChange(timeState.value)
            }, mHour, mMinute, false
        )

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .clip(CircleShape)
                .then(modifier)
        ) {
            TextButton(onClick = { mTimePickerDialog.show() }.also {  
                Log.d("click", "id $id clicked!") 
            }) {
               Column() {
                   // 单独使用这行可以正常更新
                   //Text(text = mTime.value)
                   
                   // 两行同时使用时都能更新，单独使用这行永远不更新
                   Text(text = timeState.value.entry)
               }
            }
        }
    } else {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .clip(CircleShape)
                .then(modifier)
        ) {
            Text(text = symbol, color = MaterialTheme.colors.onBackground)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTestTheme {}
}

问题原因 #

Compose 重组触发的核心是追踪到MutableState的value引用发生变化：

• 你定义的TimeCardEntry是普通类，entry是普通可变字段，没有被Compose状态系统包裹
• 执行timeState.value.entry = "$mHour:$mMinute"时，只是修改了timeState.value指向实例的内部字段，timeState.value本身的引用没有发生任何变化，Compose检测不到状态变更，自然不会触发重组更新UI
• 两个Text同时存在时能正常更新，本质是mTime.value = "$mHour:$mMinute"这行直接修改了mTime这个MutableState的value，触发了重组，重组时顺带读取了已经被修改的timeState.value.entry值，才看起来两个文本都更新了，并不是timeState的变化被检测到了。
• 额外问题：validState直接用remember包裹计算逻辑，只会在 composable 首次进入组合时执行一次，后续entry更新不会重新计算值，永远是初始值。

修复方案 #

推荐方案：使用不可变类，更新时替换整个State的value #

TimeCardEntry保持为不可变data类，字段都用val声明，更新状态时调用copy()生成新实例，赋值给timeState.value，让Compose检测到引用变化触发重组：

1. 先修改TimeCardEntry定义，把var entry改成val entry

data class TimeCardEntry(val id: Int = -1, val entry: String = "")

2. 修改时间选择器的回调逻辑，更新时赋值新实例

{ _, mHour: Int, mMinute: Int ->
    val selectedTime = "$mHour:$mMinute"
    // 替换整个value为新实例
    timeState.value = timeState.value.copy(entry = selectedTime)
    mTime.value = selectedTime
    onValueChange(timeState.value)
}

3. 修复validState的写法，用derivedStateOf追踪依赖的状态变化

val validState = remember {
    derivedStateOf { timeState.value.entry.trim().isNotEmpty() }
}
// 使用时取 validState.value 即可

备选方案：用State包裹可变字段 #

如果确实需要修改类内部字段，可以把可变字段用MutableState包裹，让Compose能追踪到内部字段的变化：

import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf

data class TimeCardEntry(val id: Int = -1, val entry: MutableState<String> = mutableStateOf(""))

// 初始化
val timeState = remember {
    mutableStateOf(TimeCardEntry(id, mutableStateOf(symbol)))
}

// 更新时修改entry的value
timeState.value.entry.value = "$mHour:$mMinute"

这种写法容易出现状态不一致、遗漏状态观测的问题，日常开发优先选第一种不可变数据+整体替换的方案。

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