第五十七回： Form Widget

我们在上一章回中介绍了"如何在Button中同时显示文字和图标"相关的内容，本章回中将介绍 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组件的所有属性，在实际项目中使用该组件来替代FormField组件；该组件类似TextField组件，主要用来
  获取输入内容。该组件一般不会被单独使用，经常用来给Form组件的child属性赋值，相当是是Form组件的子组件。

示例代码

Form(
  //通过key获取FormState
  key: formKey,
  child: Padding(
    //添加边距，不然会直接贴着边排列
    padding: EdgeInsets.all(32.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        //FormField自身没有物理形状，它显示的内容是子组件的内容
        FormField(builder: (context) {
          return const Text("This is FormField");
        }),
        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;
          },
        ),
      ],
    ),
  ),
),

在上面的代码中，我们把Form的子组件放到了Column容器中，这样方便排列组件，同时在Column容器外层嵌套了一个边距，这样可以让For及其子组件与屏幕边缘保持一定的边距。

代码中很多地方都添加有注释，这样方便大家理解代码。此外，该代码只是核心代码，比如代码中的部分方法和变量没有定义，大家可以到Github上ex026文件中阅读完整的代码，然后编译并且运行程序，我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于Form Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!