当前位置：首页 > news >正文

Flutter 中的 TextField 小部件：全面指南

news 2025/8/8 5:08:04

Flutter 中的 TextField 小部件：全面指南

在 Flutter 中，TextField 是一个允许用户输入文本的小部件。它非常灵活，支持多种文本输入场景，如单行文本、多行文本、密码输入、数值输入等。TextField 还提供了丰富的定制选项，包括文本样式、图标、控制器等。

基础用法

TextField 最基本的用法是创建一个可以输入单行文本的字段：

TextField(decoration: InputDecoration(border: OutlineInputBorder(),labelText: 'Enter your name',),
)

这将创建一个带有标签和下划线的文本输入框。

文本输入类型

TextField 支持多种文本输入类型，通过 TextInputType 属性设置：

文本输入

TextField(keyboardType: TextInputType.text,// ... 其他属性
)

数字输入

TextField(keyboardType: TextInputType.number,// ... 其他属性
)

多行文本

TextField(keyboardType: TextInputType.multiline,maxLines: null, // 允许无限行// ... 其他属性
)

密码输入

TextField(obscureText: true, // 隐藏输入的文本// ... 其他属性
)

控制器和焦点

TextField 可以使用 TextEditingController 控制输入的文本，以及使用 FocusNode 管理焦点：

TextEditingController _controller = TextEditingController();
FocusNode _focusNode = FocusNode();TextField(controller: _controller,focusNode: _focusNode,// ... 其他属性
)

输入装饰

InputDecoration 是一个用于定义 TextField 外观的类，包括标签、占位符文本、前缀/后缀图标、错误文本等：

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 属性：

TextField(inputFormatters: [WhitelistingTextInputFormatter.digitsOnly, // 只允许输入数字],validator: (value) {if (value == null || value.isEmpty) {return 'Please enter your name';}return null;},// ... 其他属性
)

自动完成和填充

TextField 支持自动完成和自动填充功能，通过 AutofillHints：

TextField(autofillHints: [AutofillHints.name],// ... 其他属性
)

监听输入变化

你可以监听文本输入的变化，例如，当用户输入文本时执行一些操作：

TextField(onEditingComplete: () {// 文本输入完成时的回调},onSubmitted: (value) {// 文本提交时的回调},// ... 其他属性
)

高级布局

TextField 可以与其他小部件结合使用，创建复杂的表单：

Column(children: <Widget>[TextField(decoration: InputDecoration(labelText: 'Username',),),TextField(decoration: InputDecoration(labelText: 'Password',suffixIcon: Icon(Icons.visibility),),obscureText: true,),ElevatedButton(onPressed: () {// 登录按钮的回调},child: Text('Login'),),],
)