Android Academy · 课时

管理表单状态

Q: 「管理表单状态」这节课中我会学到什么？

使用状态保存并更新字段值 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用状态保存并更新字段值

管理表单状态 是 CoddyKit 上的免费 Android Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

从一个字段到表单

单个文本字段很简单。真实表单通常包含多个字段：姓名、电子邮件、密码，可能还有复选框。在本课中，您将学习如何在 Jetpack Compose 中以清晰的方式保存和更新整个表单的状态。

掌握这一点后，验证、提交和预览都会变得简单。

多个独立状态

最简单的方法是：每个字段使用一个 mutableStateOf。每个字段读取并更新属于自己的那部分状态。

对于只有两三个字段的小型表单，这种方法完全足够。

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

在数据类中组合状态

随着表单变得复杂，许多分散的变量会变得难以管理。更清晰的做法是使用一个不可变的 data class 来表示整个表单。

您只需保存一个包含该对象的状态，并使用 copy() 更新它。

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

使用 copy() 更新

由于状态对象是不可变的，您不能直接修改它。相反，应创建一个只修改了某个字段的新副本，然后将其重新赋值。

这样可以让 Compose 的状态模型保持可预测：新对象意味着新的快照，而新的快照会触发重组。

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

完整的数据类表单

这里整个表单由一个 SignUpState 驱动。每个字段都通过 copy() 更新其中一个属性。

请注意，您可以随时轻松读取整个表单的值：它就是 form。

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

复选框和开关

并非所有输入都是文本。Checkbox 或 Switch 的工作方式相同：一个布尔值加上一个 onCheckedChange 回调。

与存储字符串一样，将这个布尔值存储在表单状态中即可。

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

从状态派生值

使用单一状态来源的一大好处是：您可以根据它计算出各种值，而不必存储额外的变量。例如，可以计算表单是否已经准备好提交。

使用 derivedStateOf（或简单表达式），这样表单发生变化时，结果就会自动更新。

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

应对配置变更

remember 会在重组期间保留状态，但遇到屏幕旋转等配置变更时，状态就会丢失。若要在旋转期间保留简单值，请使用 rememberSaveable。

对于基本类型和 Parcelable 类型，它都可以直接使用。

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

将表单状态提升到 ViewModel

对于超出简单范围的表单，请将状态保存在 ViewModel 中。它可以在配置变更后继续保留，并让界面逻辑与可组合函数分离。

可组合函数读取状态并转发事件；ViewModel 负责维护真实状态。

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

连接 ViewModel

在可组合函数中获取 ViewModel，并将每个字段绑定到对应的状态和处理函数。这样界面保持精简，也便于测试。

这是生产环境表单推荐采用的结构。

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

纯 Kotlin：copy() 实战

copy() 更新模式只是标准 Kotlin 数据类的行为。这里让它独立运行，以便您了解每次更新都会生成一个全新的对象。

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

快速检查

您将表单建模为状态中保存的不可变 data class。应该如何更新其中的单个字段？

回顾

您已经学习了如何管理整个表单的状态：

小型表单：每个字段使用一个 mutableStateOf。
大型表单：使用一个不可变的 data class，并通过 copy() 更新。
布尔值驱动 Checkbox 和 Switch 的方式，与文本驱动字段相同。
像“可以提交”这样的值应当派生出来，而不是存储起来。
旋转屏幕时使用 rememberSaveable，在真实界面中使用 ViewModel。

下一步：验证输入并显示有帮助的错误信息。

常见问题解答

「管理表单状态」课时是免费的吗？

是的 — 「管理表单状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「管理表单状态」这节课中我会学到什么？

使用状态保存并更新字段值你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「管理表单状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy