TextField用于文本输入,它提供了很多属性,通过源码查看一下主要属性的作用:
const TextField({
Key key,
this.controller,
this.focusNode,
this.decoration = const InputDecoration(),
TextInputType keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.textAlign = TextAlign.start,
this.autofocus = false,
this.obscureText = false,
this.autocorrect = true,
this.maxLines = 1,
this.maxLength,
this.maxLengthEnforced = true,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
}) : assert(textAlign != null),
assert(autofocus != null),
assert(obscureText != null),
assert(autocorrect != null),
assert(maxLengthEnforced != null),
assert(scrollPadding != null),
assert(maxLines == null || maxLines > 0),
assert(maxLength == null || maxLength > 0),
keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
super(key: key);
controller:编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller,则TextField内部会自动创建一个;
focusNode:用于控制TextField是否占有当前键盘的输入焦点;
InputDecoration:用于控制TextField的外观显示,如提示文本、背景颜色、边框等;
autofocus: 是否自动获取焦点;
-
keyboardType:用于设置该输入框默认的键盘输入类型,可取值范围:
- text : 文本输入键盘
- multiline :多行文本
- number : 数字
- phone :优化后的电话号码输入键盘
- datetime :优化后的日期输入键盘
textInputAction:键盘动作按钮图标(即回车键位图标),它是一个枚举值,有多个可选值,全部的取值列表读者可以查看API文档;
style:正在编辑的文本样式;
textAlign: 输入框内编辑文本在水平方向的对齐方式;
obscureText:是否隐藏正在编辑的文本,如用于输入密码的场景等,文本内容会用“•”替换。
maxLines:输入框的最大行数,默认为1;如果为null,则无行数限制;
maxLength和maxLengthEnforced :maxLength代表输入框文本的最大长度,设置后输入框右下角会显示输入的文本计数。maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入,为true时会阻止输入,为false时不会阻止输入但输入框会变红;
onChange:输入框内容改变时的回调函数;注:内容改变事件也可以通过controller来监听;
onEditingComplete和onSubmitted:这两个回调都是在输入框输入完成时触发,比如按了键盘的完成键(对号图标)或搜索键(🔍图标)。不同的是两个回调签名不同,onSubmitted回调是ValueChanged<String>类型,它接收当前输入内容做为参数,而onEditingComplete不接收参数;
inputFormatters:用于指定输入格式;当用户输入内容改变时,会根据指定的格式来校验;
enable:如果为false,则输入框会被禁用,禁用状态不接收输入和事件,同时显示禁用态样式(在其decoration中定义);
cursorWidth、cursorRadius和cursorColor:这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
属性介绍完,编写一个输入用户名和密码,并且可以控制输入框焦点状态,监听输入内容的事例:
import 'package:flutter/material.dart';
class InputPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _InputState();
}
}
class _InputState extends State<InputPage> {
//输入框监听器
TextEditingController _unameController = new TextEditingController();
TextEditingController _passwordController = new TextEditingController();
//输入框焦点管理对象
FocusNode unFocusNode = new FocusNode();
FocusNode pwdFocusNode = new FocusNode();
//管理输入框焦点对象的对象
FocusScopeNode focusScopeNode;
@override
void initState() {
//输入框件添加(注册)监听器,用于检测输入框内内容的变化
_unameController.addListener(() {
print("username:" + _unameController.text);
});
_passwordController.addListener(() {
print("password:" + _passwordController.text);
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
//页面绘制
return Scaffold(
appBar: AppBar(
title: Text("输入框,表单"),
),
body: Container(
//竖直排列布局
child: Column(
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "用户名",
hintText: "输入用户名称",
prefixIcon: Icon(Icons.person)),
// controller: _unameController,
onChanged: (v) {
print("username:" + v);
},
focusNode: unFocusNode,
),
TextField(
autofocus: true,
// controller: _passwordController,
decoration: InputDecoration(
labelText: "密码",
hintText: "输入密码",
prefixIcon: Icon(Icons.lock)),
onChanged: (v) {
print("password:" + v);
},
focusNode: pwdFocusNode,
),
//绘制按钮布局
Builder(builder: (ctx) {
return Column(
children: <Widget>[
RaisedButton(
onPressed: () {
//焦点对象管理对象初始化
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(ctx);
}
//进行输入框焦点的转移
if (unFocusNode.hasFocus && !pwdFocusNode.hasFocus) {
focusScopeNode.requestFocus(pwdFocusNode);
} else if (pwdFocusNode.hasFocus &&
!unFocusNode.hasFocus) {
focusScopeNode.requestFocus(unFocusNode);
}else if (!unFocusNode.hasFocus&&!pwdFocusNode.hasFocus){
focusScopeNode.requestFocus(unFocusNode);
}
},
child: Text("移动焦点"),
),
RaisedButton(
onPressed: (){
//输入框失去焦点
unFocusNode.unfocus();
pwdFocusNode.unfocus();
},
child: Text("关闭软键盘"),
),
],
);
}),
],
),
),
);
}
}
运行程序可以实现上述描述的效果,具体api详情可查看源码或者官方文档,输入框学习暂时到此为止!希望能够对看官们有所帮助!