表单是一个包含表单元素的区域 。表单元素允许用户输入内容， 比如 : 文本域 、 下拉 列表、单选框、复选框等。 常见的应用场景有: 登录、注册、输入信息等。表单里有两个 重要的组件， 一个是 Form 组件用来做整个表单提交使用的，另一个是 TextFormField 组件用来做用户输入的。
先来看看 Form 组件的属性，如下所示 :
| 属性名 | 类型 | 说明 |
|---|---|---|
| key | Key | 组件在整个 Widget树中的 key值。 |
| autovalidate | bool | 是否自动校验输入内容，当为true时，每一个子FormField内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用 FormState.validate() 来手动校验。 |
| child | Widget | 组件 child只能有一个子组件。 |
| onWillPop | WillPopCallback | 决定 Form 所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个 Future 对象，如果 Future 的最终结果是 false，则当前路由不会返回；如果为 true，则会返回到上一个路由。此属性通常用于拦截返回按钮。 |
| onChanged | VoidCallback | Form 的任意一个子 FormField 内容发生变化时会触发此回调。 |
TextFromField 组件的属性， 如下所示:
| 属性名 | 类型 | 说明 |
|---|---|---|
| autovalidate | bool | 是否自动校验。 |
| obscureText | bool | 是否是密码 |
| initialValue | T | 表单字段初始值，比如 · 输入收货地址时，默认回填的地址信息 |
| onSaved | FormFieldSetter<T> | 当 Form 表单调用保存方法 Save 时回调的函数。 |
| validator | FormFieldValidator<T> | Form 表单验证器 ，验证回调 |
为了获取表单的实例，我们需要设置-个全局类型的 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详解
输入框和表单
