Flutter——Widget(4)、TextField
输入框控件TextField
- 获取输入内容controller
如TextEditingController userNameController = TextEditingController();，userNameController.text获取对应的TextField控件输入的内容。 - keyboardType
指定输入类型。取值自TextInputType中的text,, number, phone, datetime, emailAddress, url等。 - textInputAction
指定回车键类型更改。取值自TextInputAction中的done、go、search、send、next等。还需要设置onEditingComplete来指定点击改过类型的回车键的响应事件。如指定为next，方法指定跳转到密码输入框onEditingComplete: () => FocusScope.of(context).requestFocus(pwdNode)，其中FocusNode pwdNode = FocusNode();在密码的输入控件中指定focusNode: pwdNode。 - obscureText
输入内容是否隐藏。密码输入框设置为true。 - maxLines
最大行数，默认为1。 - maxLength
最大输入字符长度。 - InputDecoration。
- icon
设置输入框的图标。如icon: Icon(Icons.account_box)表示在输入框左边显示系统自带的账号图标。输入框激活状态下图标也会颜色变更。 - prefixIcon
类似于icon，但是图标显示在输入框下划线线内。 - prefix
类似于prefixIcon，可以自定义控件如显示文本。prefix: Text("用户名")。 - prefixText
prefix指定为Text，设置固定显示在前面的字符串前缀。如手机号码输入前面固定+86：prefixText: "+86"。 - suffixIcon、suffix、suffixText
类似于prefixIcon、prefix、prefixText，但是是显示在后面。suffixText能用于设定单位等固定显示在尾部。 - labelText
提示文案，类似于安卓的Hint，在输入框激活时会动画上移到上方。 - helperText
显示在输入框下方的帮助文案。一般不设置。 - hintText
激活输入框但是未输入内容时的提示文案。如果labelText存在，则未激活状态下显示的是labelText，否则未激活状态下也显示hintText。
- icon
过程中解决的bug：
1、有输入框，用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug：bottom overflowed by X PIXELS。
2、运行安卓报错：Flutter SocketException: Failed to create server socket (OS Error: Permission denied, errno = 13), address = 127.0.0.1, port = 0。在android工程AndroidManifest.xml配置
3、AppBar中标题默认靠左显示，设置属性让标题水平居中。
centerTitle: true, //文字title居中
实现登录界面的代码如下：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class Login extends StatefulWidget {
@override
State createState() => LoginState();
}
class LoginState extends State {
// 用户名的控制器
final TextEditingController userNameCtrl = TextEditingController();
//密码的控制器
final TextEditingController passwordCtrl = TextEditingController();
// 光标跳转的密码输入框对象
FocusNode pwdNode = FocusNode();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("登录"),
centerTitle: true, //文字title居中
leading: new BackButton()),
// 有输入框，用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug。bottom overflowed by X PIXELS
body: SingleChildScrollView(
child: Column(
children: [
new Padding(
padding: EdgeInsets.fromLTRB(40, 24, 40, 0),
child: TextField(
controller: userNameCtrl,
// 指定该输入框是输入手机号码的
keyboardType: TextInputType.phone,
// 回车键用途，输入下一项。还需要具体实现。
textInputAction: TextInputAction.next,
// 键盘动作按钮点击之后执行的代码：光标切换到指定的输入框
onEditingComplete: () =>
FocusScope.of(context).requestFocus(pwdNode),
maxLength: 11,
decoration: InputDecoration(
icon: Icon(Icons.account_circle),
labelText: "请输入用户名",
// helperText: "一般为手机号码", // 一般不设置
hintText: "11位手机号码",
// prefixIcon: Icon(Icons.account_circle), // 输入框线内
// prefix: Text("用户名"),
// prefixText: "+86",
),
),
),
new Padding(
padding: EdgeInsets.fromLTRB(40, 4, 40, 0),
child: TextField(
controller: passwordCtrl,
focusNode: pwdNode,
keyboardType: TextInputType.text,
// 回车键用途，完成输入
textInputAction: TextInputAction.done,
maxLength: 11,
obscureText: true,
// 密码输入，隐藏
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: "请输入密码",
// suffixIcon: Icon(Icons.visibility_off),
// suffixText: "(元)",
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(40, 36, 40, 0),
child: Row(children: [
new Expanded(
child: RaisedButton(
color: Colors.blue,
onPressed: () {
doLogin();
},
child: new Text(
"登录",
style: TextStyle(
color: Colors.white,
),
),
))
]),
),
],
)));
}
void doLogin() {
if (userNameCtrl.text.isEmpty || passwordCtrl.text.isEmpty) {
Fluttertoast.showToast(msg: "请输入用户名和密码");
} else {
Fluttertoast.showToast(
msg: "用户名: ${userNameCtrl.text}，密码: ${passwordCtrl.text}");
}
}
}
实现效果：
本文源码：TAG，下载源码需指定tag。