Jetpack Compose中TextField值变更触发两次问题排查

核心问题根源 #

你遇到的两次onValueChange触发（第二次为空字符串），本质是没有用不可变数据类管理UI状态导致的。你的LoginStateUI和内部user对象是可变类型，直接修改属性时，StateFlow会因为对象引用未改变，无法正确通知状态变更，进而引发Compose重组时的状态不一致，最终导致TextField出现异常回调。

具体修复步骤 #

1. 将状态类改为不可变数据类 #

把LoginStateUI和User定义为不可变的data class，确保状态变更时生成新对象：

// 不可变用户数据类
data class User(
    val email: String = "",
    val password: String = ""
)

// 不可变登录UI状态类
data class LoginStateUI(
    val user: User = User()
)

2. 修改ViewModel的状态更新逻辑 #

不再直接修改现有对象属性，而是通过copy()方法创建新的状态对象，确保StateFlow能正确发出状态变更通知：

private val _uiState = MutableStateFlow(LoginStateUI())
val uiState: StateFlow<LoginStateUI> = _uiState.asStateFlow()

fun updateState(value: String, prop: String) {
    _uiState.update { currentState ->
        when(prop) {
            "email" -> currentState.copy(
                user = currentState.user.copy(email = value)
            )
            "password" -> currentState.copy(
                user = currentState.user.copy(password = value)
            )
            else -> currentState
        }
    }
}

3. 优化Compose界面代码（可选但更规范） #

替换collectAsState为collectAsStateWithLifecycle（更贴合Android生命周期），同时简化onValueChange的调用方式：

val viewModel = viewModel(LoginViewModel::class.java)
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

Column {
    OutlinedTextField(
        value = uiState.user.email,
        onValueChange = { viewModel.updateState(it, "email") },
        placeholder = { Text(stringResource(R.string.userLabel)) }
    )

    OutlinedTextField(
        value = uiState.user.password,
        onValueChange = { viewModel.updateState(it, "password") },
        placeholder = { Text(stringResource(R.string.passwordLabel)) },
        visualTransformation = PasswordVisualTransformation()
    )
}

额外说明 #

使用不可变数据类后，每次状态变更都会生成全新的对象，StateFlow能准确通知订阅者状态变化，Compose会基于正确的状态进行重组，彻底解决两次onValueChange触发的问题。

内容的提问来源于stack exchange，提问作者Juan Sebastian Montoya Contrer