在实际业务中，前端在提交数据前都应该验证下数据的基本合法性，如果使用TextField进行验证需要写很多的方法进行判断就显得非常麻烦。那有更加方便的组件吗？肯定有，这就是这节介绍的Form组件。Form组件就可以对验证进行统一控制，也就方便了我们写代码。但是一般Form表单都是与TextFormField组件组合使用。下面我们就来介绍：

Form组件是一个容器类控件，可以包含多个FormField表单控件，这样的好处是统一管理。

• onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果Future的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。
• onChanged：Form的任意一个子FormField内容发生变化时会触发此回调。

在使用Form的时候需要设置其key，通过key获取当前的FormState，然后可以调用FormState的save、validate、reset等方法，一般通过如下方法设置：

final _formKey = GlobalKey<FormState>();
Form(
    key: _formKey,
    ...
)

获取FormState并调用相关方法：

var _state = _formKey.currentState;
if(_state.validate()){
  _state.save();
}

为了方便使用，Flutter提供了一个TextFormField组件，它继承自FormField类，也是TextField的一个包装类，所以除了FormField定义的属性之外，它还包括TextField的属性。

FormState为Form的State类，可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的FormField进行统一操作。我们看看其常用的三个方法：

• FormState.validate()：调用此方法后，会调用Form的FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。
• FormState.save()：调用此方法后，会调用Form的FormField的save回调，用于保存表单内容
• FormState.reset()：调用此方法后，会将FormField的内容清空。

代码实现

import 'package:flutter/material.dart';

class FormBaseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String _name = ""; //用户名
    String _password = ""; //密码
    GlobalKey _formKey = new GlobalKey<FormState>();
    return Scaffold(
      appBar: AppBar(
        title: Text('表单组件：Form和TextFormField'),
        elevation: 0.0,
        centerTitle: true,
      ),
      body: Form(
          key: _formKey,
          onChanged: () {
            print("内部组件发生改变");
          },
          onWillPop: () async {
            print("返回处理");
            return true;
          },
          child: Column(
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                autofocus: true,
                decoration: InputDecoration(
                  labelText: "用户名",
                  icon: Icon(Icons.person),
                  hintText: "请输入用户名",
                ),
                validator: (value) {
                  if (value!.isEmpty) {
                    return "用户名不能为空";
                  }
                },
                onSaved: (value) {
                  _name = value.toString();
                  print("保存用户名：" + _name);
                },
              ),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                  icon: Icon(Icons.lock),
                  hintText: "请输入密码",
                  labelText: "密码",
                ),
                validator: (value) {
                  if (value!.trim().isEmpty) {
                    return "密码不能为空";
                  }
                },
                onSaved: (value) {
                  _password = value.toString();
                  print("保存密码：" + _password);
                },
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {
                      //验证表单数据
                      var _state = _formKey.currentState as FormState;
                      if (_state.validate()) {
                        _state.save();
                      } else {
                        print("验证失败");
                      }
                    },
                    child: Text("提交"),
                  ),
                  TextButton(
                    onPressed: () {
                      //清除表单数据
                      var _state = _formKey.currentState as FormState;
                      _state.reset();
                    },
                    child: Text("重置"),
                  )
                ],
              )
            ],
          )),
    );
  }
}