Flutter 中如何使用 Form 和 FormState？

推荐答案

在 Flutter 中，Form 和 FormState 用于管理和验证表单数据。以下是如何使用它们的步骤：

1. 创建 Form 和 FormState：

   • 使用 Form 小部件包裹表单内容。
   • 为 Form 小部件提供一个 GlobalKey<FormState>，以便稍后访问 FormState。

2. 添加表单字段：

   • 在 Form 内部使用 TextFormField 或其他表单字段小部件。
   • 为每个字段提供验证逻辑。

3. 验证和提交表单：

   • 使用 FormState 的 validate() 方法验证所有字段。
   • 如果验证通过，使用 FormState 的 save() 方法保存表单数据。

示例代码：

-- -------------------- ---- -------
----- ------ ------- -------------- -
  ---------
  ------------ ------------- -- ---------------
-

----- ------------ ------- ------------- -
  ----- -------- - -----------------------

  ---------
  ------ ------------------ -------- -
    ------ -----
      ---- ---------
      ------ -------
        --------- ---------
          --------------
            ---------- ------- -
              -- --------------- -
                ------ ------- ----- ---- ------
              -
              ------ -----
            --
          --
          ---------------
            ---------- -- -
              -- ---------------------------------- -
                -----------------------------
                -- ------
              -
            --
            ------ ---------------
          --
        --
      --
    --
  -
-

本题详细解读

Form 和 FormState 的作用

• Form：Form 是一个容器小部件，用于将多个表单字段（如 TextFormField）组合在一起。它允许你一次性验证和保存所有字段的数据。

• FormState：FormState 是 Form 小部件的状态对象，它包含了表单的当前状态和操作表单的方法，如 validate() 和 save()。

关键点

1. GlobalKey<formstate>：

   • GlobalKey 用于在 Form 外部访问 FormState。通过 _formKey.currentState，你可以在任何地方调用 validate() 和 save() 方法。

2. 验证逻辑：

   • 每个 TextFormField 都可以有一个 validator 函数，用于验证输入数据。如果验证失败，返回一个字符串作为错误消息；如果验证通过，返回 null。

3. 表单提交：

   • 在提交按钮的 onPressed 回调中，首先调用 _formKey.currentState.validate() 来验证所有字段。如果所有字段都有效，调用 _formKey.currentState.save() 来保存表单数据。

注意事项

• 表单字段的 onSaved 方法：你可以在 TextFormField 中使用 onSaved 回调来保存字段的值。例如：

  TextFormField(
    onSaved: (value) {
      // 保存字段值
    },
  );

• 自动验证：你可以通过设置 autovalidateMode 属性为 AutovalidateMode.onUserInteraction 来启用自动验证，这样用户在输入时就会实时验证字段。

Form(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  // 其他代码
);

通过以上步骤，你可以在 Flutter 中有效地使用 Form 和 FormState 来管理和验证表单数据。