TextField：文本输入Column(
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person)
),
),
TextField(
decoration: InputDecoration(
labelText: "密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
),
],
);
- controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件
- focusNode：用于控制TextField是否占有当前键盘的输入焦点，是用来和键盘交互的一个句柄
- InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等
- keyboardType：用于设置输入框默认的键盘输入类型，TextInputType类型
TextInputType枚举值
text：文本输入键盘
multiline：多行文本，需和maxLines配合使用(设为null或大于1)
number：数字；会弹出数字键盘
phone：优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
datetime：优化后的日期输入键盘；Android上会显示“: -”
emailAddress：优化后的电子邮件地址；会显示“@ .”
url：优化后的url输入键盘； 会显示“/ .”
- textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值
- style：正在编辑的文本样式
- textAlign：输入框内编辑文本在水平方向的对齐方式
- autofocus：是否自动获取焦点
- obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
- maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制
- maxLength：输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数
- maxLengthEnforcement：决定当输入文本长度超过maxLength时如何处理，如截断、超出等
- toolbarOptions：长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll
- onChange：输入框内容改变时的回调函数
- onEditingComplete：在输入框输入完成时触发，比如按了键盘的完成键或搜索键，不接收参数
- onSubmitted：在输入框输入完成时触发，比如按了键盘的完成键或搜索键，接收当前输入内容做为参数
- inputFormatters：指定输入格式；当用户输入内容改变时，会根据指定的格式来校验
- enable：如果为false，则输入框会被禁用，禁用状态不能响应输入和事件，同时显示禁用态样式
- cursorWidth：自定义输入框光标宽度
- cursorRadius：自定义输入框圆角
- cursorColor：自定义输入框颜色
Form：表单import 'package:flutter/material.dart';
class FormTestRoute extends StatefulWidget {
@override
_FormTestRouteState createState() => _FormTestRouteState();
}
class _FormTestRouteState extends State<FormTestRoute> {
TextEditingController _unameController = TextEditingController();
TextEditingController _pwdController = TextEditingController();
GlobalKey _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey, //设置globalKey，用于后面获取FormState
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
children: <Widget>[
TextFormField(
autofocus: true,
controller: _unameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
icon: Icon(Icons.person),
),
// 校验用户名
validator: (v) {
return v!.trim().isNotEmpty ? null : "用户名不能为空";
},
),
TextFormField(
controller: _pwdController,
decoration: InputDecoration(
labelText: "密码",
hintText: "您的登录密码",
icon: Icon(Icons.lock),
),
obscureText: true,
//校验密码
validator: (v) {
return v!.trim().length > 5 ? null : "密码不能少于6位";
},
),
// 登录按钮
Padding(
padding: const EdgeInsets.only(top: 28.0),
child: Row(
children: <Widget>[
Expanded(
child: ElevatedButton(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("登录"),
),
onPressed: () {
// 通过_formKey.currentState 获取FormState后，
// 调用validate()方法校验用户名密码是否合法，校验
// 通过后再提交数据。
if ((_formKey.currentState as FormState).validate()) {
//验证通过提交数据
}
},
),
),
],
),
)
],
),
);
}
}
- Form
- autovalidate：是否自动校验输入内容；当为true时，每一个子 FormField 内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验
- onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果 Future 的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮
- onChanged：Form的任意一个子FormField内容发生变化时会触发此回调
- FormField
- onSaved：保存回调
- validator：验证回调
- initialValue：初始值
- autovalidate：是否自动校验
- TextFormField：继承自FormField类，也是TextField的包装类，所以具有两者的属性
- FormState：Form的State类。可以通过Form.of()或GlobalKey获得
- FormState.validate()：会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false
- FormState.save()：会调用Form子孙FormField的save回调，用于保存表