亲宝软件园·资讯

展开

Flutter Form表单控件超全总结

老孟程序员 人气:0
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200314174808212-1268358791.png) > 注意:无特殊说明,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的基本用法: ```dart TextFormField( onSaved: (value){ print('$value'); }, autovalidate: false, validator: (String value){ return value.length>=6?null:'账号最少6个字符'; }, ) ``` TextFormField效果如下: ![](https://img2020.cnblogs.com/other/467322/202003/467322-20200314174808679-1389178566.png) `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`等方法,一般通过如下方法设置: ```dart final _formKey = GlobalKey

加载全部内容

相关教程
猜你喜欢
用户评论