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");
},
),
],
),
)
);
}
}
提供CDN加速