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<String> onChanged,
VoidCallback onEditingComplete,
ValueChanged<String> onSubmitted,
List<TextInputFormatter> 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<String> | 输入框改变时候的回调函数，也可以通过controller来监听 |
| onEditingComplete | VoidCallback | 输入完后触发的回调函数，不接受参数 |
| onSubmitted | ValueChanged<String> | 接收ValueChanged<String>的参数 |
| inputFormatters | List<TextInputFormatter> | 用于指定输入格式,可以用于检验格式 |
| 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 <Widget>[
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: <Widget>[
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");
},
),
],
),
)
);
}
}
到此这篇关于介绍Flutter输入框TextField属性及监听事件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持Devmax。