Flutter 表单

表单是所有现代移动和 Web 应用程序不可或缺的一部分。它主要用于与应用程序交互以及从用户那里收集信息。它们可以执行许多任务，具体取决于您的业务需求和逻辑，例如用户身份验证、添加用户、搜索、过滤、排序、预订等。表单可以包含文本字段、按钮、复选框、单选按钮等。

创建表单

Flutter 提供了 Form widget 来创建表单。表单 widget 充当一个容器，允许我们对多个表单字段进行分组和验证。创建表单时，需要提供 GlobalKey。此键唯一地标识表单，并允许您在表单字段中进行任何验证。

Form widget 使用子 widget TextFormField 为用户提供输入文本字段。此 widget 呈现 Material Design 文本字段，并且还允许我们在发生验证错误时显示它们。

让我们创建一个表单。首先，创建一个 Flutter 项目，并在 main.dart 文件中替换以下代码。在此代码段中，我们创建了一个名为 MyCustomForm 的自定义类。在此类中，我们定义了一个全局键作为 _formKey。此键保存一个 FormState，可用于检索表单 widget。在此类的 build 方法中，我们添加了一些自定义样式，并使用 TextFormField widget 来提供表单字段，例如姓名、电话号码、出生日期或仅一个普通字段。在 TextFormField 中，我们使用了 InputDecoration，它提供了表单属性的外观，例如边框、标签、图标、提示、样式等。最后，我们添加了一个 button 来提交表单。

输出

现在，运行该应用程序，您可以在您的 Android 模拟器中看到以下屏幕。此表单包含三个字段：姓名、电话号码、出生日期和提交按钮。

表单验证

验证是一种方法，它允许我们更正或确认某个标准。它确保了输入数据的身份验证。

验证表单是所有数字交互中的常见做法。要在 Flutter 中验证表单，我们需要主要实现三个步骤。

步骤 1： 将 Form widget 与全局键一起使用。

步骤 2： 使用 TextFormField 为输入字段提供验证器属性。

步骤 3： 创建一个按钮来验证表单字段并显示验证错误。

让我们通过下面的示例来理解它。在上面的代码中，我们必须在 TextFormField 中使用 validator() 函数来验证输入属性。如果用户输入了错误的输入，则验证器函数将返回一个包含 错误消息 的字符串；否则，验证器函数将返回 null。在验证器函数中，请确保 TextFormField 不为空。否则，它会返回一条错误消息。

validator() 函数可以写成如下代码段

现在，打开 main.dart 文件，并在 TextFormField widget 中添加 validator() 函数。用 main.dart 文件中的以下代码替换它。

输出

现在，运行该应用程序。出现以下屏幕。

在此表单中，如果您将任何输入字段留空，您将收到一条错误消息，如下面的屏幕所示。