Flutter Form表单控件超全总结

概述注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Form、FormField、TextFormField是

注意：无特殊说明，Flutter版本及Dart版本如下：

Flutter版本： 1.12.13+hotfix.5Dart版本： 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;        },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)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

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

总结

以上是内存溢出为你收集整理的Flutter Form表单控件超全总结全部内容，希望文章能够帮你解决Flutter Form表单控件超全总结所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。