Flutter Form表单控件超全总结

注意：无特殊说明，flutter版本及dart版本如下：

• flutter版本： 1.12.13+hotfix.5
• dart版本： 2.7.0

form、formfield、textformfield是表单相关控件，类似于h5中form。

formfield

formfield是一个表单控件，此控件包含表单的状态，方便更新ui，通常情况下，我们不会直接使用formfield，而是使用textformfield。

textformfield

textformfield继承自formfield，是一个输入框表单，因此textformfield中有很多关于textfield的属性，textformfield的基本用法：

textformfield(
  onsaved: (value){
    print('$value');
  },
  autovalidate: false,
  validator: (string value){
    return value.length>=6?null:'账号最少6个字符';
  },
)

textformfield效果如下：

onsaved是一个可选参数，当form调用formstate.save时才会回调此方法。

autovalidate参数为是否自动验证，设置为true时，textfield发生变化就会调用validator，设置false时，formfieldstate.validate调用时才会回调validator，如果form的autovalidate设置为true，textformfield忽略此参数。

validator验证函数，输入的值不匹配的时候返回的字符串显示在textfield的errortext属性位置，返回null，表示没有错误。

form

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();
}

validate方法为验证表单数据的合法性，此方法会调用每一个formfield的validator回调，此回调需要字符串表示数据验证不通过，将会在改表单下显示返回的字符串，具体可查看下textformfield介绍。

save方法回调每一个formfield的save方法，通常情况下保存表单数据。

用form写一个简单的登录功能，代码如下：

var _account = '';
var _pwd = '';
final _formkey = globalkey<formstate>();
form(
  key: _formkey,
  child: column(
    children: <widget>[
      textformfield(
        decoration: inputdecoration(hinttext: '输入账号'),
        onsaved: (value) {
          _name = value;
        },
        validator: (string value) {
          return value.length >= 6 ? null : '账号最少6个字符';
        },
      ),
      textformfield(
        decoration: inputdecoration(hinttext: '输入密码'),
        obscuretext: true,
        onsaved: (value) {
          _pwd = value;
        },
        validator: (string value) {
          return value.length >= 6 ? null : '账号最少6个字符';
        },
      ),
      raisedbutton(
        child: text('登录'),
        onpressed: () {
          var _state = form.of(context);
          if(_state.validate()){
            _state.save();
            login(_name,_pwd);
          }
        },
      )
    ],
  ),
)

我们希望用户在输入表单时点击返回按钮提示用户"确认退出吗？"，用法如下：

form(
  key: _formkey,
  onwillpop: () async {
    return await showdialog<bool>(
        context: context,
        builder: (buildcontext context) {
          return alertdialog(
            title: text('提示'),
            content: text('确认退出吗？'),
            actions: <widget>[
              flatbutton(
                child: text('取消'),
                onpressed: () {
                  navigator.of(context).pop(false);
                },
              ),
              flatbutton(
                child: text('确认'),
                onpressed: () {
                  navigator.of(context).pop(true);
                },
              ),
            ],
          );
        });
  },
  ...
)

效果如下：

onwillpop回调决定form所在的路由是否可以直接返回，该回调需要返回future<bool>，返回false表示当前路由不会返回；为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。

onchanged：当子表单控件发生变化时回调。

欢迎加入flutter的微信交流群(mqd_zzy)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。