14、Flutter 自定义输入与表单字段及交互功能实现

Flutter 自定义输入与表单字段及交互功能实现

1. 自定义输入与表单字段基础

在 Flutter 中， Form 和 FormField 组件有助于输入操作和验证。同时，Flutter 自带一系列 FormField 变体的输入组件，具备访问和验证数据的辅助函数。由于 Flutter 框架具有很强的扩展性和灵活性，因此创建自定义字段是可行的，我们可以添加自己的输入方法，通过验证回调暴露验证功能，还能使用 save() 和 reset() 方法。

1.1 创建自定义输入的步骤

创建自定义输入组件与创建普通组件类似，但需额外实现一些方法。通常按以下步骤进行：
1. 创建一个继承自 StatefulWidget 的自定义组件，用于跟踪输入值。可以通过封装其他输入组件或自定义整个输入过程（如使用手势）来接收用户输入。
2. 创建一个继承自 FormField 的组件，用于显示上一步创建的输入组件，并暴露其字段。

1.2 自定义输入组件示例

以一个六位数验证码输入组件为例，该组件后续将成为 FormField 组件，并暴露 save() 、 reset() 和 validate() 方法。在登录界面，后续会使用 Flutter 社区的 code_input 插件替