在 Flutter 中创建响应式表单

在您开发的几乎每个应用程序中，迟早都会需要捕获用户输入。幸运的是，在 Flutter 中捕获文本输入相当简单。但是，随着更多字段和输入类型添加到表单中，捕获此信息的复杂性迅速增加。

通常，这些输入字段，无论是文本字段、日期字段还是任何其他类型的输入，都称为“控件”。验证也可能成为一个问题，因为即使是对某些字段的简单验证也可能需要编写冗长的自定义验证器。

在本文中，我们将创建一个注册表单，其中包含输入验证和根据其他字段值更改的字段。我们将首先在不使用响应式表单的情况下完成此任务，然后使用响应式表单重新实现相同的表单，以了解 Flutter 中响应式表单的好处。

我们将涵盖的内容：

• Flutter 反应式表单项目概述

• 在 Flutter 中制作没有响应式表单的表单

• 在 Flutter 中手动创建表单的问题

• 需要考虑的两种反应式 Flutter 包选项

• 用于在Flutter

  flutter_form_builder

  中创建响应式表单

  • 设置基本表单输入

  • 设置宠物类型选择器

  • 最后设置三个问题

• 验证和检索表单中的值

Flutter 反应式表单项目概述

我们将创建的应用程序是一个用于宠物进入“宠物旅馆”的注册应用程序——人们可以在度假时将宠物送走的地方。

为了让这个应用程序正常工作，人们需要提供详细信息，例如他们的姓名和电话号码、他们拥有什么样的宠物以及他们的宠物的好恶。最终结果将如下所示：

此表格有一些要求。

首先，三个后续问题必须根据用户选择的宠物类型而变化。

接下来，需要这三个问题的答案，所以我们必须添加Flutter 表单验证逻辑以确保它们被填写。

最后，电话号码必须只包含数字，所以如果它包含非数字值，那么表单应该拒绝该条目并通知用户。

在 Flutter 中制作没有响应式表单的表单

在第一种方法中，我们自己手动创建表单，并且我们还希望捕获这些单独字段中的文本输入。

因此，我们负责创建TextControllers可以关联到TextFormField小部件的个体。我们还负责创建一个容纳所选宠物的变量。

现在让我们创建这些变量：

final _formKey = GlobalKey<FormState>();
PetType? _petType;
final firstName = TextEditingController();
final lastName = TextEditingController();
final questionResponses = List.generate(3, (index) => TextEditingController());

要将文本写入这些字段，我们将创建TextFormField小部件并将它们绑定到适当的控制器：

TextFormField(
  decoration: InputDecoration(hintText: 'First Name'),
  controller: firstName,
),
TextFormField(
  decoration: InputDecoration(hintText: 'Last Name'),
  controller: lastName,
),

电话号码输入字段有点不同，因为我们需要验证其中是否包含有效的电话号码，并在检测到无效输入时提示用户：

TextFormField(
  decoration: InputDecoration(hintText: 'Phone number'),
  autovalidateMode: AutovalidateMode.always,
  validator: (val) {
    if (val == null || val == "") {
      return 'Please enter a phone number';
    }
    if (int.tryParse(val) == null) {
      return 'Only enter numbers in the phone number field';
    }
    return null;
  },
),

接下来，我们指定宠物选择器。这是一个RadioListTile允许用户选择他们带入的宠物类型：猫、狗或针鼹。

当用户选择一种宠物时，我们还希望遍历之前对这些问题给出的答案并清除它们，以便一次只选择一个选项。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

RadioListTile<PetType>(
  value: PetType.cat,
  groupValue: _petType,
  onChanged: (val) => setState(() {
    for (final controller in questionResponses) {
      controller.