Flutter TextField
TextField
textField用于文本输入，它提供了很多属性：
const TextField({
...
TextEditingController controller,
FocusNode focusNode,
InputDecoration decoration = const InputDecoration(),
TextInputType keyboardType,
TextInputAction textInputAction,
TextStyle style,
TextAlign textAlign = TextAlign.start,
bool autofocus = false,
bool obscureText = false,
int maxLines = 1,
int maxLength,
this.maxLengthEnforcement,
ToolbarOptions? toolbarOptions,
ValueChanged onChanged,
VoidCallback onEditingComplete,
ValueChanged onSubmitted,
List inputFormatters,
bool enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.onTap,
...
}) | 属性 | 类型 | 说明 |
|---|---|---|
| controller | TextEditingController | 控制器，通过它可以获取文本内容，监听编辑文本事件，大多数情况下我们需要主动提供一个控制器 |
| focusNode | InputDecoration | 焦点控制 |
| decoration | InputDecoration | 用于控制文本的外观，如提示文本、背景色、边框等 |
| keyboardType | TextInputType | 用于设置输入框的默认键盘类型 |
| textInputAction | TextInputAction | 键盘动作图标按钮，他是一个枚举值 |
| style | TextStyle | 正在编辑的文本样式 |
| textAlign | TextAlign | 文本框的在水平方向的对齐方式 |
| autofocus | bool | 是否自动获取焦点 |
| obscureText | bool | 是否隐藏正在编辑的文本，用于密码输入场景 |
| maxLines | int | 输入框的最大行数 |
| maxlength | int | 文本框的最大长度 |
| maxLengthEnforcement | 当文本长度超出文本框长度时如何处理 | |
| toolbarOptions | ToolbarOptions | 长按时出现的选项 |
| onChange | ValueChanged |
输入框改变时候的回调函数，也可以通过controller来监听 |
| onEditingComplete | VoidCallback | 输入完后触发的回调函数，不接受参数 |
| onSubmitted | ValueChanged |
接收ValueChanged |
| inputFormatters | List |
用于指定输入格式,可以用于检验格式 |
| enable | bool | 为bool时，输入框将变为禁用状态 |
cursorWidth、cursorRadius和cursorColor |
这三个属性是用于自定义输入框光标宽度、圆角和颜色 |
示例：注意提示内容都是在InputDecoration中设置的
void mian()=>runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "文本输出框",
home:Scaffold(
appBar: AppBar(title:const Text("文本输入框")),
body:Column(
children:const [
TextField(
autofocus: true,
decoration: InputDecoration(
//文本
labelText:"用户名",
//提示信息
hintText: "用户名或邮箱",
//图标
prefixIcon: Icon(Icons.person),
),
//设置最大行数
maxLines: 1,
),
TextField(
autofocus: true,
decoration: InputDecoration(
labelText:"密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock),
),
//隐藏文本
obscureText: true,
),
],
),
)
);
}
} 监听事件：
获取内容的两种方式：
-
定义两个变量，用于保存用户名和密码，然后再onChanged触发时，各自保存输入内容
-
通过Controller直接获取,onChanged是一种单纯的监听改变事件，但Controller中还有一些其他方法可以使用。
第一种方式：
onChanged: (value){
print("你输入的内容为$value");
}第二种方式：
定义一个controller：
TextEditingController _unameController = TextEditingController();
_unameController.addListener(() {
print("你输入的内容为：${_unameController.text}");
});完整代码：
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context) {
//定义一个controller
TextEditingController _unameController = TextEditingController();
//调用.addListener重写其中的方法
_unameController.addListener(() {
print("你输入的内容为：${_unameController.text}");
});
return MaterialApp(
title: "文本输出框",
home:Scaffold(
appBar: AppBar(title:const Text("文本输入框")),
body:Column(
children: [
TextField(
//设置监听
controller: _unameController,
autofocus: true,
decoration: const InputDecoration(
//文本
labelText:"用户名",
//提示信息
hintText: "用户名或邮箱",
//图标
prefixIcon: Icon(Icons.person),
),
//设置最大行数
maxLines: 1,
),
TextField(
autofocus: true,
decoration:const InputDecoration(
labelText:"密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock),
),
//隐藏文本
obscureText: true,
//表单改变事件
onChanged: (value){
print("你输入的内容为$value");
},
),
],
),
)
);
}
} 焦点事件：
焦点事件也就是聚焦事件，当光标聚焦到TextField中时键盘会出现，当光标离开键盘消失，focusNode属性就是用控制光标的。
在MyApp定义三个属性：
FocusNode focusNode1 = FocusNode(); FocusNode focusNode2 = FocusNode(); FocusScopeNode? focusScopeNode;
focusScopeNode中的requestFocus()方法控制焦点转换，focusNode1、focusNode2中的unfocus()控制失焦。
定义两个按钮：用于转换焦点和失去焦点
为按钮添加监听事件：FocusScope.of(context).requestFocus(FocusNode)方法设置成想要的焦点, 不然就看不到焦点变换,还有对已是焦点的对象用"FocusScope.of(context).requestFocus(FocusNode)"方法设置会抛出一个错误,所以FocusNode在被设置之前判断一次是否为空。focusNode1.unfocus()方法是将当前的焦点取消
Column(
children: [
ElevatedButton(onPressed: (){
//如果不为空就初始化
focusScopeNode ??= FocusScope.of(context);
focusScopeNode!.requestFocus(focusNode2);
}, child:const Text("移动焦点")),
ElevatedButton(onPressed: (){
//取消焦点
focusNode1.unfocus();
focusNode2.unfocus();
}, child: const Text("隐藏键盘"))
],
), 完整代码：
class MyApp extends StatelessWidget
{
FocusNode focusNode1 = FocusNode();
FocusNode focusNode2 = FocusNode();
FocusScopeNode? focusScopeNode;
@override
Widget build(BuildContext context) {
TextEditingController _unameController = TextEditingController();
_unameController.addListener(() {
print("你输入的内容为：${_unameController.text}");
});
return MaterialApp(
title: "文本输出框",
home:Scaffold(
appBar: AppBar(title:const Text("文本输入框")),
body:Column(
children: [
TextField(
focusNode: focusNode1,
controller: _unameController,
autofocus: true,
decoration: const InputDecoration(
//文本
labelText:"用户名",
//提示信息
hintText: "用户名或邮箱",
//图标
prefixIcon: Icon(Icons.person),
),
//设置最大行数
maxLines: 1,
),
TextField(
focusNode: focusNode2,
autofocus: true,
decoration:const InputDecoration(
labelText:"密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock),
),
//隐藏文本
obscureText: true,
onChanged: (value){
print("你输入的内容为$value");
},
),
Column(
children: [
ElevatedButton(onPressed: (){
focusScopeNode ??= FocusScope.of(context);
focusScopeNode!.requestFocus(focusNode2);
}, child:const Text("移动焦点")),
ElevatedButton(onPressed: (){
//取消焦点
focusNode1.unfocus();
focusNode2.unfocus();
}, child: const Text("隐藏键盘"))
],
),
],
),
)
);
}
}