flutter的Form部件

Flutter提供了一个Form 组件，它可以对输入框进行分组，然后进行一些统一操作，如输入内容校验、输入框重置以及输入内容保存。

Form

Form继承自StatefulWidget对象，它对应的状态类为FormState。我们先看看Form类的定义：

Form({
  @required Widget child,
  bool autovalidate = false,
  WillPopCallback onWillPop,
  VoidCallback onChanged,
})

• autovalidate：是否自动校验输入内容；当为true时，每一个子FormField内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验。

• onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果Future的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。

• onChanged：Form的任意一个子FormField内容发生变化时会触发此回调。

• key:组件在整个Widget树中的key值
  

FormField

const FormField({

  FormFieldSetter<T> onSaved, //保存回调
  FormFieldValidator<T>  validator, //验证回调
  T initialValue, //初始值
  bool autovalidate = false, //是否自动校验。})

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

FormState

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 FormDemo extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> {
  final _formKey= new GlobalKey<FormState>();
  String _userName,_password;
  void _registerHandle(){
   var from= _formKey.currentState;

   //验证用户输入的内容是否通过了定义的验证规则
    if(from.validate()){
      from.save();
     
   }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text('表单案例'),
      ),
      body: Container(
        margin: EdgeInsets.all(20.0),

        child: Form(
          key:_formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: '用户名',
                ),
                //保存用户输入的内容
                onSaved: (value){
                  _userName=value;
                },
                //验证规则
                validator: (v){
                  if(v.isEmpty){
                    return '密码不能为空';
                  }
                  return null;
                },
                //自动验证
                autovalidate: true,
              ),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                  labelText: '密码',
                ),
//                保存用户输入的内容
                onSaved: (value){
                  _password=value;
                },
                //验证规则
                validator: (v){
                  if(v.isEmpty){
                    return '用户名不能为空';
                  }
                  return null;
                },
                //自动验证
                autovalidate: true,
              ),
              Container(
                width: 300,
                color: Colors.blue,
                margin: EdgeInsets.only(top: 50.0),
                child: FlatButton(
                  child: Text(
                    '提交',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: _registerHandle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}