Flutter:表单组件Form和TextFormField

xiaohai 2021-08-12 07:49:07 4445人围观 标签: Flutter 
简介flutter提供一套表单校验框架Form,可以通过Form框架一步校验所有表单,非常方便,比较常用的用法是Form+TextFormField

在实际业务中,前端在提交数据前都应该验证下数据的基本合法性,如果使用TextField进行验证需要写很多的方法进行判断就显得非常麻烦。那有更加方便的组件吗?肯定有,这就是这节介绍的Form组件。Form组件就可以对验证进行统一控制,也就方便了我们写代码。但是一般Form表单都是与TextFormField组件组合使用。下面我们就来介绍:

Form组件是一个容器类控件,可以包含多个FormField表单控件,这样的好处是统一管理。

  • onWillPop:决定Form所在的路由是否可以直接返回(如点击返回按钮),该回调返回一个Future对象,如果Future的最终结果是false,则当前路由不会返回;如果为true,则会返回到上一个路由。此属性通常用于拦截返回按钮。
  • onChanged: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();
}

为了方便使用,Flutter提供了一个TextFormField组件,它继承自FormField类,也是TextField的一个包装类,所以除了FormField定义的属性之外,它还包括TextField的属性。

FormState为Form的State类,可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的FormField进行统一操作。我们看看其常用的三个方法:

  • FormState.validate():调用此方法后,会调用Form的FormField的validate回调,如果有一个校验失败,则返回false,所有校验失败项都会返回用户返回的错误提示。
  • FormState.save():调用此方法后,会调用Form的FormField的save回调,用于保存表单内容
  • FormState.reset():调用此方法后,会将FormField的内容清空。

代码实现

import 'package:flutter/material.dart';

class FormBaseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String _name = ""; //用户名
    String _password = ""; //密码
    GlobalKey _formKey = new GlobalKey<FormState>();
    return Scaffold(
      appBar: AppBar(
        title: Text('表单组件:Form和TextFormField'),
        elevation: 0.0,
        centerTitle: true,
      ),
      body: Form(
          key: _formKey,
          onChanged: () {
            print("内部组件发生改变");
          },
          onWillPop: () async {
            print("返回处理");
            return true;
          },
          child: Column(
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                autofocus: true,
                decoration: InputDecoration(
                  labelText: "用户名",
                  icon: Icon(Icons.person),
                  hintText: "请输入用户名",
                ),
                validator: (value) {
                  if (value!.isEmpty) {
                    return "用户名不能为空";
                  }
                },
                onSaved: (value) {
                  _name = value.toString();
                  print("保存用户名:" + _name);
                },
              ),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                  icon: Icon(Icons.lock),
                  hintText: "请输入密码",
                  labelText: "密码",
                ),
                validator: (value) {
                  if (value!.trim().isEmpty) {
                    return "密码不能为空";
                  }
                },
                onSaved: (value) {
                  _password = value.toString();
                  print("保存密码:" + _password);
                },
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {
                      //验证表单数据
                      var _state = _formKey.currentState as FormState;
                      if (_state.validate()) {
                        _state.save();
                      } else {
                        print("验证失败");
                      }
                    },
                    child: Text("提交"),
                  ),
                  TextButton(
                    onPressed: () {
                      //清除表单数据
                      var _state = _formKey.currentState as FormState;
                      _state.reset();
                    },
                    child: Text("重置"),
                  )
                ],
              )
            ],
          )),
    );
  }
}

图片alt