姬長信(Redy)

4.6 表单组件

## 4.6 表单组件 表单是一个包含表单元素的区域。表单元素允许用户输入内容/uff0c比如/uff1a文本域、下拉列表、单选框、复选框等。常见的应用场景有/uff1a登录、注册、输入信息等。表单里有两个重要的组件/uff0c一个是Form组件用来做整个表单提交使用的/uff0c另一个是TextFormField组件用来做用户输入的。 先来看看Form组件的属性/uff0c如下所示/uff1a ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041849504417) 对于输入框我们最关心的是输入内容是否合法/uff0c比如邮箱地址是否正确/uff0c电话号码是否是数字/uff0c等等。等用户输入完成后/uff0c需要知道输入框输入的内容。 为了获取表单的实例/uff0c我们需要设置一个全局类型的key/uff0c通过这个key的属性/uff0c来获取表单对象。需要使用GlobalKey来获取/uff0c代码如下所示/uff1a ```objective-c GlobalKey loginKey = new GlobalKey(); ``` 接下来编写一个简单的登录界面/uff0c其中有用户名/uff0c密码输入框再加上一个登录按钮。当用户没有输入任何内容时/uff0c输入提示/u201c请输入用户名 请输入密码/u201d/uff0c如图4-12所示。当用户正常输入内容点击/u201c登录/u201d按钮/uff0c界面不发生任何变化/uff0c表示输入内容正常。这里可以尝试输入一个非法的数据/uff0c比如验证代码里要求密码必需为6位/uff0c当你输入6位以下时/uff0c再次点击/u201c登录/u201d/uff0c会报一个错误提示信息/u201c密码长度不够6位/u201d/uff0c如图4-13所示。 完整示例代码如下所示/uff1a ```objective-c import 'package:flutter/material.dart'; void main() => runApp(new LoginPage()); class LoginPage extends StatefulWidget { @override _LoginPageState createState() => new _LoginPageState(); } class _LoginPageState extends State { //全局Key用来获取Form表单组件 GlobalKey loginKey = new GlobalKey(); //用户名 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 new MaterialApp( title: 'Form表单示例', home: new Scaffold( appBar: new AppBar( title: new Text('Form表单示例'), ), body: new Column( children: [ new Container( padding: const EdgeInsets.all(16.0), child: new Form( key: loginKey, child: new Column( children: [ new TextFormField( decoration: new InputDecoration( labelText: '请输入用户名', ), onSaved: (value) { userName = value; }, onFieldSubmitted: (value){ }, ), new TextFormField( decoration: new InputDecoration( labelText: '请输入密码', ), obscureText: true, //验证表单方法 validator: (value) { return value.length