Flutter 表单组件

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

先来看一看Form组件的属性，如下所示：

再来看TextFromField组件的属性，如下所示：

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

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

GlobalKey<FormState> loginKey = GlobalKey<FormState>();

接下来编写一个简单的登录界面，其中有用户名输入框、密码输入框以及一个登录按钮。当用户没有输入任何内容时，输入提示“请输入用户名”“请输入密码”。当用户正常输入内容点击“登录”按钮，界面不发生任何变化，表示输入内容正常。

这里可以尝试输入一个非法的数据，比如验证代码里要求密码必须为6位，当你输入的密码少于6位时，再次点击“登录”，会报一个错误提示信息“密码长度不够6位”，如图所示:

完整示例代码如下所示：

import 'package:flutter/material.dart';

void main() => runApp(LoginPage());

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

// 全局Key用来获取Form表单组件
GlobalKey<FormState> loginKey = GlobalKey<FormState>();
// 用户名
String userName;
// 密码
String password;

void login() {
  // 读取当前的Form状态
  var loginForm = loginKey.currentState;

  // 验证Form表单
  if (loginForm.validate()) {
loginForm.save();
print('userName:' + userName + ' password:' + password);
  }
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
home: Scaffold(
  appBar: AppBar(
    title: Text('Form表单示例'),
  ),
  body: Column(
    children: <Widget>[
      Container(
          // 添加内边距
          padding: const EdgeInsets.all(16.0),
          // 添加Form表单
          child: Form(
            key: loginKey,
            child: Column(
              children: <Widget>[
                // 文本输入框表单组件
                TextFormField(
                  // 装饰器
                  decoration: InputDecoration(
                    // 提示文本
                    labelText: '请输入用户名',
                  ),
                  // 接收输入值
                  onSaved: (value) {
                    userName = value;
                  },
                  onFieldSubmitted: (value){},
                ),
                TextFormField(
                  decoration: InputDecoration(
                    labelText: '请输入密码',
                  ),
                  obscureText: true,
                  // 验证表单方法
                  validator: (value) {
                    return value.length < 6 ? "密码长度不够6位" : null;
                  },
                  onSaved: (value) {
                      password = value;
                    },
                  ),
                ],
              ),
            ),
        ),
        // 限定容器大小
        SizedBox(
            width: 340.0,
            height: 42.0,
            // 添加登录按钮
            child: RaisedButton(
              onPressed: login,
              child: Text(
                '登录',
                style: TextStyle(
                  fontSize: 18.0,
                ),
              ),
            ),
        ),
      ],
    ),
  ),
);
  }
}