如何在Compose中将TextField的值赋值给已提升的状态？

问题原因 #

Kotlin 默认采用值传递参数，你在可组合函数内部修改 textFieldValue 参数只会修改当前函数栈的局部变量，无法同步到外层持有的状态实例，这是符合Jetpack Compose单向数据流设计规范的表现。

推荐实现方案 #

方案1：状态提升（官方推荐） #

和原生TextField的API设计保持一致，将状态值和修改回调分开作为参数传入，完全由外层控制状态，组件复用性、可测试性最高：

@Composable
fun ReusableFormField(
    label: String,
    textFieldValue: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    helperText: String? = null
) {
    // 标签渲染逻辑
    Text(text = label, modifier = Modifier.padding(bottom = 4.dp))
    TextField(
        value = textFieldValue,
        onValueChange = onValueChange,
        modifier = Modifier.fillMaxWidth()
    )
    // 辅助文本渲染逻辑
    helperText?.let {
        Text(
            text = it,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(top = 4.dp)
        )
    }
}

外层调用示例：

@Composable
fun UserFormScreen() {
    var username by remember { mutableStateOf(TextFieldValue("")) }
    
    ReusableFormField(
        label = "用户名",
        textFieldValue = username,
        onValueChange = { username = it },
        helperText = "请输入2-16位字符"
    )
}

方案2：传递MutableState（类引用传递效果） #

如果希望简化调用参数，也可以直接把MutableState作为参数传入，达到类似按引用传递的效果，内部修改状态会直接同步到外层：

@Composable
fun ReusableFormField(
    label: String,
    textFieldState: MutableState<TextFieldValue>,
    helperText: String? = null
) {
    Text(text = label, modifier = Modifier.padding(bottom = 4.dp))
    TextField(
        value = textFieldState.value,
        onValueChange = { textFieldState.value = it },
        modifier = Modifier.fillMaxWidth()
    )
    helperText?.let {
        Text(
            text = it,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(top = 4.dp)
        )
    }
}

外层调用示例：

@Composable
fun UserFormScreen() {
    val usernameState = remember { mutableStateOf(TextFieldValue("")) }
    // 外层可直接通过 usernameState.value 读写输入内容
    ReusableFormField(
        label = "用户名",
        textFieldState = usernameState,
        helperText = "请输入2-16位字符"
    )
}

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