flutter|flutter 表单Form使用示例 flutter表单Form使用示例

介绍 flutter提供一套表单校验框架Form，可以通过Form框架一步校验所有表单，非常方便，比较常用的用法是Form+TextFormField。
Form

class Form extends StatefulWidget { final Widget child; ... const Form({ Key key, @required this.child, this.autovalidate = false, this.onWillPop, this.onChanged, }) ...

Form继承StatefulWidget，有一个widget 类型的child参数，证明Form是一个容器。
Form里还有一个validate方法，如下

bool validate() { ... }

一般通过GlobalKey来访问Form中validate方法，Form的validate方法用来校验所有Form里的FormField表单，validate方法返回值是bool类型，返回true表示所有表单校验成功；返回false表示有校验失败的表单；
TextFormField

class TextFormField extends FormField { ... TextFormField({ ... FormFieldValidator validator, ... })

TextFormField继承FormField，FormField后面源码分析会讲，所有Form可统一校验的表单都必须继承FormField，可以通过FormField自定义各种各样可校验表单，TextFormField只是FormField自定义表单中的一种。
表单校验必须实现的方法为validator，定义如下：

typedef FormFieldValidator = String Function(T value);

每个表单的校验规则都在validator里实现，通过返回值来判断是否校验成功。

返回null，表示表单校验成功
返回非null，表示表单校验失败，其实返回的非null还可以用来表示校验失败的错误提示信息，TextFormField内部实现就将返回的非null当成错误信息提示出来。

使用步骤 1、用Form包在所有需要校验的表单最外层，如下：

Form( key:xxx, child:xxx

2、将GlobalKey传给Form，用于调用Form里方法，如下：

final GlobalKey _formKey = GlobalKey(); Form( key:_formKey, child:xxx

3、将TextFormField传给Form容器，如下：

final GlobalKey _formKey = GlobalKey(); Form( key:_formKey, child: ... TextFormField ...

【flutter|flutter 表单Form使用示例】4、实现对应TextFormField的校验规则，如下：

final GlobalKey _formKey = GlobalKey(); Form( key:_formKey, child: ... TextFormField( validator: (value) { ... return xxx; }, ) ...

5、最后调用Form校验所有表单方法validate，如下：

_formKey.currentState.validate()

使用示例

void main() { runApp(MyApp()); }class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('系统表单'), backgroundColor: Colors.blue, ), body: HomeContent(), ), ); } }class HomeContent extends StatefulWidget { HomeContent({Key key}) : super(key: key); _HomeContentState createState() => _HomeContentState(); }class _HomeContentState extends State { final GlobalKey _formKey = GlobalKey(); String phoneNum; @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.all(10), child: Column( children: [ Form( key: _formKey, child: Column( children: [ TextFormField( decoration: InputDecoration( hintText: '手机号码', ), validator: (value) { RegExp reg = new RegExp(r'^\d{11}$'); if (!reg.hasMatch(value)) { return '请输入11位手机号码'; } return null; }, ), TextFormField( decoration: InputDecoration( hintText: '用户名', ), validator: (value) { if (value.isEmpty) { return '请输入用户名'; } return null; }, ), ], ), ), SizedBox(height: 10), Row( children: [ Expanded( child: RaisedButton( child: Text('校验'), onPressed: () { //一步校验全部表单 if (_formKey.currentState.validate()) { Scaffold.of(context).showSnackBar(SnackBar( content: Text('校验成功...'), )); } }, ), ) ], ), ], ), ); } }

使用效果