flutter 表单Form使用示例

时间:2021-7-20 作者:qvyue

介绍

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

使用效果

flutter 表单Form使用示例
效果.gif
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。