Flutter Form 表单和输入框

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

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

TextFromField 组件的属性， 如下所示:

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

Global Key<FormState> loginKey =new GlobalKey<FormState>();

接下来编写一个简单的登录界面，完整示例代码如下所示:

import 'package:flutter/material.dart';

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

// 这个 widget 作用这个应用的顶层 widget.
//这个 widget 是无状态的，所以我们继承的是 [StatelessWidget].
//对应的，有状态的 widget 可以继承 [StatefulWidget]
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // 我们想使用 material 风格的应用，所以这里用 MaterialApp
    return MaterialApp(
      // 移动设备使用这个 title 来表示我们的应用。具体一点说，在 Android 设备里，我们点击
      // recent 按钮打开最近应用列表的时候，显示的就是这个 title。
      title: 'Welcome to Flutter',
      // 应用的“主页”
      home: 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 Scaffold(
      appBar: AppBar(
        title: Text('Form 表单组件'),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(16),
            child: Form(
              //设置globalKey，用于后面获取FormState
              key: loginKey,
              //开启自动校验
              autovalidate: true,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: '请输入用户名',
                      hintText: "用户名或邮箱",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 13,
                      ),
                      prefixIcon: Icon(Icons.person),
                    ),
                    //校验用户
                    validator: (value) {
                      return value.trim().length > 0 ? null : "用户名不能为空";
                    },
                    //当 Form 表单调用保存方法 Save时回调的函数。
                    onSaved: (value) {
                      userName = value;
                    },
                    // 当用户确定已经完成编辑时触发
                    onFieldSubmitted: (value) {},
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: '请输入密码',
                      hintText: '你的登录密码',
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 13,
                      ),
                      prefixIcon: Icon(Icons.lock),
                    ),
                    //是否是密码
                    obscureText: true,
                    //校验密码
                    validator: (value) {
                      return value.length < 6 ? '密码长度不够 6 位' : null;
                    },
                    onSaved: (value) {
                      password = value;
                    },
                  )
                ],
              ),
              //内容改变的回调
              onChanged: () {
                print("onChanged");
              },
            ),
          ),
          Container(
            padding: EdgeInsets.all(16),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    padding: EdgeInsets.all(15),
                    child: Text(
                      "登录",
                      style: TextStyle(fontSize: 18),
                    ),
                    textColor: Colors.white,
                    color: Theme.of(context).primaryColor,
                    onPressed: login,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

运行效果如下图所示：

Form 表单和输入框的更详细介绍参考以下两个文章：
TextField详解
输入框和表单