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
                    ...

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('校验成功...'),
                      ));
                    }
                  },
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

使用效果

效果.gif