在Android Jetpack Compose中如何将TextField用户输入设置为展示文本？

核心问题原因 #

• 展示用的变量otext未使用Compose状态管理容器，变量修改无法触发界面重组，导致内容始终不更新
• 代码存在多处拼写错误、语法不完整问题：
  • 状态变量textstate在点击回调中被误写为textState（大小写不匹配）
  • 组件名TextField首字母小写、点击属性onClick中L大写、输入回调参数onValueChange多写了后缀d
  • 多处括号未闭合，且展示内容的Text组件位置错误放在了按钮内部

修复方案 #

将otext也改造为Compose可观察状态，同时修正所有语法错误即可，修复后代码如下：

@Composable
fun xyz() {
    // 输入框状态
    var textState = remember {
        mutableStateOf("")
    }
    // 展示文本状态，用remember+mutableStateOf包裹让Compose感知变化
    var oText = remember {
        mutableStateOf("")
    }

    Column(/*styling....*/) {
        TextField(
            value = textState.value,
            onValueChange = { textState.value = it },
            label = { Text(text = "Enter text") },
        )
        Button(onClick = { oText.value = textState.value }) {
            Text(text = "点击确认")
        }
        // 用于展示输入内容的独立Text组件
        Text(text = oText.value)
    }
}

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