Flutter组件之表单

表单是一个包含表单元素的区域。表单元素允许用户输入内容，比如：文本域、下拉列表、单选框、复选框等。常见的应用场景有：登录、注册、输入信息等。表单里有连个重要的组件，一个是Form组件，用来做整个表单提交使用；另一个是TextFormField组件，用来做用户输入的。

Form组件属性：

属性名	类型	说明
key	Key	组件在整个Widget树中的key值
autovalidate	bool	是否自动提交表单
child	Widget	组件child只能有一个子组件
onChanged	VoidCallback	当FormFiled值改变时的回调函数。

TextFormField组件属性：

属性名	类型	说明
autovalidate	bool	自动验证值
initialValue	T	表单字段初始值，比如：输入收货地址时，默认回填本的地址信息。
onSaved	FormFieldSetter	当Form表单调用保存方法Save时回调的函数。
validator	FormFieldValidator	Form表单验证器

对于输入框我们最关心的事输入内容是否合法，比如邮箱地址时否正确，电话号码是否是数字，等等。等用户输入完成后，需要知道输入框输入的内容。

为了获取表单的实例，我们需要设置一个全局类型的key，通过这个key的属性，来获取表单对象。需要使用GlobalKey来获取，代码如下所示：

GlobalKey loginKey = new GlobalKey();

完整代码：

import 'package:flutter/material.dart';

void main() => runApp(new HomePage());

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State {
  GlobalKey _formKey = new GlobalKey();

  String _name;

  String _password;

  void _forSubmitted() {
    var _form = _formKey.currentState;

    if (_form.validate()) {
      _form.save();
      print(_name);
      print(_password);
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Flutter data',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter Form'),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: _forSubmitted,
          child: new Text('提交'),
        ),
        body: new Container(
          padding: const EdgeInsets.all(16.0),
          child: new Form(
            key: _formKey,
            child: new Column(
              children: [
                new TextFormField(
                  decoration: new InputDecoration(
                    labelText: 'Your Name',
                  ),
                  onSaved: (val) {
                    _name = val;
                  },
                ),
                new TextFormField(
                  decoration: new InputDecoration(
                    labelText: 'Password',
                  ),
                  obscureText: true,
                  validator: (val) {
                    return val.length < 4 ? "密码长度错误" : null;
                  },
                  onSaved: (val) {
                    _password = val;
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}