Compose UI：点击第二个BasicTextField2重置第一个文本框值的问题求助

问题根源 #

这种问题通常是因为没有为每个文本框维护独立的可持久化状态：如果文本框的状态没有用remember包裹，每次Compose重组（比如点击第二个文本框触发界面更新）时，状态都会被重新初始化为默认值，导致第一个文本框的内容被重置。

修复方案与完整代码 #

1. 导入必要依赖

在你的build.gradle.kts（或build.gradle）中添加Compose核心依赖：

dependencies {
    // Compose BOM 统一管理版本
    implementation(platform("androidx.compose:compose-bom:2024.06.00"))
    // Material3 组件库
    implementation("androidx.compose.material3:material3")
    // Compose 基础 UI
    implementation("androidx.compose.ui:ui")
    // 预览工具（可选）
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}

2. 正确实现独立状态管理

为每个文本框创建独立的MutableState，并用remember确保重组时状态不丢失：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BasicTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DualTextFieldScreen() {
    // 第一个文本框的独立状态，remember保证重组时不重置
    var firstInput by remember { mutableStateOf("初始值1") }
    // 第二个文本框的独立状态
    var secondInput by remember { mutableStateOf("初始值2") }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "第一个文本框")
        BasicTextField(
            value = firstInput,
            onValueChange = { firstInput = it },
            modifier = Modifier.padding(bottom = 16.dp)
        )

        Text(text = "第二个文本框")
        BasicTextField(
            value = secondInput,
            onValueChange = { secondInput = it }
        )
    }
}

关键说明 #

• remember是Compose中用于保留状态的核心API，它会在组件重组时保存状态值，避免每次重组都重新初始化。
• 每个文本框绑定自己的MutableState，状态更新完全独立，点击第二个文本框时只会更新它自己的状态，不会影响第一个文本框的内容。

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