Flutter 中的 TextField 小部件:全面指南
在 Flutter 中,TextField
是一个允许用户输入文本的小部件。它非常灵活,支持多种文本输入场景,如单行文本、多行文本、密码输入、数值输入等。TextField
还提供了丰富的定制选项,包括文本样式、图标、控制器等。
基础用法
TextField
最基本的用法是创建一个可以输入单行文本的字段:
dart
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter your name',
),
)
这将创建一个带有标签和下划线的文本输入框。
文本输入类型
TextField
支持多种文本输入类型,通过 TextInputType
属性设置:
文本输入
dart
TextField(
keyboardType: TextInputType.text,
// ... 其他属性
)
数字输入
dart
TextField(
keyboardType: TextInputType.number,
// ... 其他属性
)
多行文本
dart
TextField(
keyboardType: TextInputType.multiline,
maxLines: null, // 允许无限行
// ... 其他属性
)
密码输入
dart
TextField(
obscureText: true, // 隐藏输入的文本
// ... 其他属性
)
控制器和焦点
TextField
可以使用 TextEditingController
控制输入的文本,以及使用 FocusNode
管理焦点:
dart
TextEditingController _controller = TextEditingController();
FocusNode _focusNode = FocusNode();
TextField(
controller: _controller,
focusNode: _focusNode,
// ... 其他属性
)
输入装饰
InputDecoration
是一个用于定义 TextField
外观的类,包括标签、占位符文本、前缀/后缀图标、错误文本等:
dart
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
suffixIcon: Icon(Icons.clear),
hintText: 'Enter your name',
errorText: 'This field is required',
contentPadding: EdgeInsets.all(8.0),
border: OutlineInputBorder(),
),
// ... 其他属性
)
输入验证
TextField
支持输入验证,通过 TextInputFormatter
或者 validator
属性:
dart
TextField(
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly, // 只允许输入数字
],
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
// ... 其他属性
)
自动完成和填充
TextField
支持自动完成和自动填充功能,通过 AutofillHints
:
dart
TextField(
autofillHints: [AutofillHints.name],
// ... 其他属性
)
监听输入变化
你可以监听文本输入的变化,例如,当用户输入文本时执行一些操作:
dart
TextField(
onEditingComplete: () {
// 文本输入完成时的回调
},
onSubmitted: (value) {
// 文本提交时的回调
},
// ... 其他属性
)
高级布局
TextField
可以与其他小部件结合使用,创建复杂的表单:
dart
Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'Username',
),
),
TextField(
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: Icon(Icons.visibility),
),
obscureText: true,
),
ElevatedButton(
onPressed: () {
// 登录按钮的回调
},
child: Text('Login'),
),
],
)
结语
TextField
是 Flutter 中处理文本输入的核心小部件,它提供了丰富的 API 和定制选项,使得在 Flutter 应用中实现各种文本输入场景变得简单而高效。掌握 TextField
的使用,可以帮助你创建出既美观又实用的表单界面。