第五十八回： Form系列组件的验证与提交功能

我们在上一章回中介绍了"如何在Buttton中同时显示文字和图标"相关的内容，本章回中将介绍Form Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的Form Widget是一种容器类组件，类似Column组件，它没有具体的物理形态，主要用来存放其它组件。被存放的组件有FormField和TextFormField，这两个组件类似前面章回中介绍的TextField组件，主要用来输入内容。本章回中将详细介绍它们的使用方法。

使用方法

和其它组件一样，Form以及和它一起使用的组件提供了相关的属性来控制自己，接下来我们将介绍这些组件的属性：

Form Widget

• key属性：主要用来获取FormState并且可以操作Form中的组件；
• child属性：主要用来存放其它组件，组件类型必须是FormField及其子类型 ;
• onChanged属性：当组件中输入的内容变化时回调；
• autovalidateModen属性：主要用来控制是否开启自动验证功能，默认不开启；

FormField Widget

• builder属性：主要用来生成其它组件，它是必选组件；
• onSaved属性：主要用来保存组件中输入的内容，它的类型是方法类型；
• validator属性：主要用来验证组件中输入的内容是否符合要求，它也是方法类型；
• initialValue属性：主要用来给组件设定初始值；

TextFormField

• decoration属性：主要用来装饰组件；
• keyboardType属性：主要用来控制组件输入内容的类型；
• style属性：主要用来控制输入内容的风格；
  该类是FormField类的子类，因此它可以使用FormField组件的所有属性；该组件类似TextField组件，主要用来获取输入内容

示例代码

TextFormField(
  decoration: const InputDecoration(
    //主要用来显示输入框的功能
    labelText: "Name:",
    //主要用来显示错误信息
    helperText: "",
    border: OutlineInputBorder(),
    //无焦点时错误的颜色,默认是红色
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.yellow,
      ),
    ),
    //有焦点时错误的颜色,最好和errorBorder一致,默认是红色
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.yellow,
      ),
    ),
    //有售点时边框的颜色，默认是蓝色
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.greenAccent,
      ),
    ),
  ),
  //验证输入值的合法性
  validator: _validateName,
  //启用自动验证，默认是关闭状态，不建议打开,建议动态修改
  // autovalidateMode:AutovalidateMode.always,
  autovalidateMode: _autoValidate,
  //保存输入值
  onSaved: (value) {
    _name = value;
  },
),

TextFormField组件的功能和TextField组件的功能类似，主要用来获取用户输入的内容，我在这里就不演示程序的运行结果了，建议大家自己动手去实践。
看官们，关于Form Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!