Flutter如何在TextFormField中实现4位PIN码输入预占位下划线效果

完全可以通过原生TextFormField实现，不需要引入第三方组件，只需要调整输入装饰、添加自定义格式化器、适配样式即可实现默认展示4个下划线占位的效果。

实现核心要点 #

• 固定输入长度限制：设置maxLength: 4，同时通过counterText: ''隐藏自带的输入字数统计提示
• 占位符配置：将hintText设置为____，调整hint样式的字间距和字体，保证每个下划线宽度和后续输入的字符宽度一致
• 输入格式化处理：添加自定义TextInputFormatter，当用户输入内容不足4位时，自动在末尾补全下划线占位，同时保证光标始终定位在用户实际输入的最后一位，不会跳到下划线后面
• 样式对齐：输入文本和hint都使用等宽字体，设置统一的字间距，避免输入字符和下划线占位出现位置偏移

核心代码示例 #

import 'dart:math';
import 'package:flutter/services.dart';

// 组件调用代码
TextFormField(
  maxLength: 4,
  keyboardType: TextInputType.number,
  // 等宽字体+统一字间距保证字符和下划线对齐，字间距数值可根据需求调整
  style: const TextStyle(letterSpacing: 24, fontFamily: 'monospace', fontSize: 20),
  decoration: const InputDecoration(
    hintText: '____',
    hintStyle: TextStyle(letterSpacing: 24, fontFamily: 'monospace', fontSize: 20),
    counterText: '', // 隐藏默认长度计数
    border: InputBorder.none,
  ),
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly, // 仅允许输入数字，按需调整过滤规则
    // 自定义格式化器，不足4位自动补下划线
    TextInputFormatter.withFunction((oldValue, newValue) {
      String inputText = newValue.text.replaceAll('_', '');
      String filledPin = inputText.padRight(4, '_');
      return TextEditingValue(
        text: filledPin,
        selection: TextSelection.collapsed(offset: min(inputText.length, 4)),
      );
    }),
  ],
)

注意：如果PIN码需要做加密隐藏，添加obscureText: true和obscuringCharacter: '*'属性即可，不会影响占位下划线的展示逻辑。

内容的提问来源于stack exchange，提问作者someJoe121