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

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 的使用,可以帮助你创建出既美观又实用的表单界面。

相关推荐
Myli_ing1 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维18 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
旭日猎鹰25 分钟前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰25 分钟前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神25 分钟前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
I_Am_Me_32 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~39 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ42 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript