Flutter TextField控件详解：从基础到进阶

Android

2023-10-14 17:10:01

Flutter基础之 TextField控件详解

前言

文本输入框控件是移动应用中必不可少的元素，Flutter为我们提供了功能丰富的TextField控件，本文将从基础到进阶，带领大家全面解析TextField控件的使用。

TextField基础

TextField是一个简单的单行文本输入框，主要用于收集用户的文本输入。它包含以下属性：

maxLength ：设置文本输入的最大长度。
buildCounter ：自定义右下角字数显示。
TextEditingController ：用于获取文本、设置光标位置和清空输入框等操作。

进阶用法

占位符和标签

使用placeholder 属性可以设置文本输入框的占位符文本，在没有输入任何内容时显示。而label 属性则会在文本输入框上方显示一个标签。

类型控制

TextField提供了一系列输入类型控制选项，例如：

TextInputType.text ：普通文本输入。
TextInputType.number ：数字输入。
TextInputType.emailAddress ：电子邮件地址输入。

输入格式化

TextField支持输入格式化，可以通过inputFormatters 属性指定格式化器。常见的格式化器包括：

FilteringTextInputFormatter.allow() ：允许特定字符。
LengthLimitingTextInputFormatter() ：限制输入长度。
WhitelistingTextInputFormatter() ：只允许特定字符集。

文本样式

TextField支持自定义文本样式，可以通过style 属性设置。例如，可以设置文本大小、颜色和字体。

文本对齐

TextField提供textAlign 属性，用于设置文本对齐方式。常用的对齐方式包括：

TextAlign.start ：左对齐。
TextAlign.center ：居中对齐。
TextAlign.end ：右对齐。

实例代码

import 'package:flutter/material.dart';

class TextFieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        labelText: '请输入您的姓名',
        hintText: '例如：John Doe',
      ),
      maxLength: 20,
      buildCounter: (context, {currentLength, maxLength, isFocused}) {
        return Text('$currentLength/$maxLength');
      },
      keyboardType: TextInputType.name,
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 18),
    );
  }
}