将 Flutter TextField 文本框玩转：64 个示例图解 (一)

2024-02-07 04:57:35

TextField：Flutter 中文本交互的利器

在 Flutter 的浩瀚世界中，TextField 是我们不可或缺的利器，它掌控着用户与应用程序之间的文本交互。为了驾驭 TextField 的强大功能，我们精心准备了 64 个示例图解，带你领略 TextField 的无限魅力，从此告别枯燥乏味的输入体验！

基本属性

TextField 有几个关键属性，包括：

controller： 管理文本输入框中的文本。
decoration： 自定义文本输入框的外观，包括边框、填充和提示文本。
keyboardType： 指定键盘类型，如数字键盘或文本键盘。
inputFormatters： 对用户输入进行格式化，如只允许数字输入。

示例图解

现在，让我们通过一组示例图解，探索 TextField 的基础用法：

1. 创建一个简单的文本输入框

TextField(
  decoration: InputDecoration(
    labelText: '输入姓名',
  ),
)

2. 设置文本样式

TextField(
  decoration: InputDecoration(
    labelText: '输入姓名',
    textStyle: TextStyle(fontSize: 20, color: Colors.red),
  ),
)

3. 设置边框样式

TextField(
  decoration: InputDecoration(
    labelText: '输入姓名',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
)

4. 设置填充

TextField(
  decoration: InputDecoration(
    labelText: '输入姓名',
    contentPadding: EdgeInsets.all(10),
  ),
)

5. 设置提示文本

TextField(
  decoration: InputDecoration(
    labelText: '输入姓名',
    hintText: '在此输入你的姓名',
  ),
)

6. 设置键盘类型

TextField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: '输入数字',
  ),
)

7. 设置输入格式化器

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  decoration: InputDecoration(
    labelText: '输入数字',
  ),
)

高级用法

除了基础用法外，TextField 还提供了许多高级特性，让你的文本交互更加丰富多彩。

1. 多行文本

使用 maxLines 属性可以创建多行文本输入框。

TextField(
  maxLines: 5,
  decoration: InputDecoration(
    labelText: '输入评论',
  ),
)

2. 自动完成

通过设置 autocorrect 和 enableSuggestions 属性，可以开启自动完成功能。

TextField(
  autocorrect: true,
  enableSuggestions: true,
  decoration: InputDecoration(
    labelText: '输入城市名称',
  ),
)

3. 输入验证

使用 validator 属性可以验证用户输入。

TextField(
  validator: (value) {
    if (value.isEmpty) {
      return '不能为空';
    }
    return null;
  },
  decoration: InputDecoration(
    labelText: '输入密码',
  ),
)