在 Flutter 中，表单是用户输入数据的重要方式。它们通常用于登录、注册、搜索和配置等场景。本章将详细介绍如何在 Flutter 应用程序中创建和管理表单。
表单基础
表单由一组输入字段组成，如文本框、复选框、单选按钮等。Flutter 提供了多种小部件来帮助我们构建这些输入元素。下面是一些常用的表单相关的小部件：
TextFormField：用于输入文本。Checkbox：用于选择或取消选择某个选项。Radio：用于从一组互斥选项中选择一个。DropdownButton：用于从下拉列表中选择一个选项。
使用 TextFormField 创建文本输入框
TextFormField 是 TextField 的包装器，提供了验证功能和更丰富的功能。以下是一个简单的示例：
-- -------------------- ---- -------
--------------
----------- ----------------
---------- ------
--------- ---------
------- ---------------------
--
---------- ------- -
-- ------ -- ---- -- -------------- -
------ ---------
-
------ -----
--
-使用 Checkbox 创建复选框
Checkbox 小部件允许用户选择或取消选择某个选项。以下是一个示例：
-- -------------------- ---- -------
---- ---------- - ------
---------
------ ------------------ -------- -
------ ---------
------ -----------
---------- ------ --------- -
----------- -
---------- - -------- -- ------
---
--
--
-使用 Radio 创建单选按钮
Radio 小部件允许用户从一组互斥选项中选择一个。以下是一个示例：
-- -------------------- ---- -------
----- ---------------- ------- -------------- -
---------
----------------------- ------------- -- -------------------------
-
----- ---------------------- ------- ----------------------- -
--- ---------- - --
---------
------ ------------------ -------- -
------ -------
--------- ---------
---------
------ ----- -----------
-------- -----------
------ --
----------- -----------
---------- ----- ------ -
----------- -
---------- - -------
---
--
--
--
---------
------ ----- -----------
-------- -----------
------ --
----------- -----------
---------- ----- ------ -
----------- -
---------- - -------
---
--
--
--
--
--
-
-管理表单状态
在 Flutter 中，表单的状态管理可以通过 Form 和 GlobalKey 来实现。Form 小部件用于包裹整个表单，而 GlobalKey 则用于获取表单的状态。
使用 Form 包裹表单
Form 小部件可以用来包裹整个表单，并且提供了一个 key 属性，这个属性应该被赋值为一个 GlobalKey<FormState>。这样我们就可以通过这个 GlobalKey 获取到表单的状态。
-- -------------------- ---- -------
----- ------ ------- -------------- -
---------
------------ ------------- -- ---------------
-
----- ------------ ------- ------------- -
----- -------- - -----------------------
---------
------ ------------------ -------- -
------ -----
---- ---------
------ -------
--------- ---------
--------------
---------- ------- -
-- ------ -- ---- -- -------------- -
------ ---------
-
------ -----
--
--
---------------
---------- -- -
-- ----------------------------------- -
-- ------
-
--
------ -----------
--
--
--
--
-
-使用 DropdownButton 创建下拉列表
DropdownButton 小部件允许用户从一个下拉列表中选择一个选项。以下是一个示例：
-- -------------------- ---- -------
----- ---------- ------- -------------- -
---------
---------------- ------------- -- -------------------
-
----- ---------------- ------- ----------------- -
------ ------------- - ------
---------
------ ------------------ -------- -
------ -----------------------
------ --------------
----- ----- ---------------------------
---------- ---
------ ----- ---------------- -------------------
---------- ----------
------- --
------ ------------------------
--
---------- -------- --------- -
----------- -
------------- - ----------
---
--
------ --------------- ------ ------
-------------------------------------- ------ -
------ -------------------------
------ ------
------ ------------
--
------------
--
-
-验证表单
在处理表单时，验证输入是非常重要的一步。Flutter 提供了 validator 属性来实现这一点。以下是一个示例：
-- -------------------- ---- -------
--------------
----------- ----------------
---------- ------
--------- ---------
------- ---------------------
--
---------- ------- -
-- ------ -- ---- -- -------------- -
------ ---------
-
------ -----
--
-使用 Form 提交表单
当用户点击提交按钮时，我们可以使用 FormState 来验证表单中的所有字段是否有效。如果表单有效，则可以继续执行提交操作。
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 表单验证成功，执行提交逻辑
}
},
child: Text('提交'),
)表单布局
在 Flutter 中，表单的布局可以使用 Column 或 Row 小部件来实现。根据需要，你可以自由地调整表单的布局。
使用 Column 布局
Column 小部件可以垂直排列子元素，非常适合用于表单的布局。
-- -------------------- ---- -------
-------
--------- -
--------------
----------- -------------------------- -------
--
--------------
----------- -------------------------- ------
--
---------------
---------- -- ---
------ -----------
--
--
-使用 Row 布局
Row 小部件可以水平排列子元素，适合于某些特定的布局需求。
-- -------------------- ---- -------
----
--------- -
---------
------ --------------
----------- -------------------------- -------
--
--
--------------- ----
---------
------ --------------
----------- -------------------------- ------
--
--
--
-总结
本章介绍了 Flutter 中表单的基本概念、常用小部件、状态管理和布局。通过这些知识，你可以开始构建功能完善的表单界面，并确保其能够正确地验证用户输入。希望这些内容对你有所帮助！
接下来的章节将深入探讨更多关于 Flutter 的高级主题。