Flutter如何实现TextFormField按指定字符自动分割输入文本

直接自定义TextInputFormatter就能实现该功能，核心要注意两个关键点：一是自动过滤用户手动输入的/避免出现重复分隔符，二是修正光标偏移逻辑，否则输入过程中光标会出现乱跳问题。

自定义分隔符格式化器代码 #

class AutoSlashInputFormatter extends TextInputFormatter {
  /// 分隔位置规则，比如[4,2]代表从开头数第4个字符后、第6个字符后插入/
  /// 常用场景参考：日期格式yyyy/MM/dd 传[4,2,2]，每4位分割传[4,4,4,4]
  final List<int> splitRules;

  AutoSlashInputFormatter({required this.splitRules});

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 先移除所有已存在的/，避免重复分隔
    final rawText = newValue.text.replaceAll('/', '');
    if (rawText.isEmpty) {
      return newValue.copyWith(
        text: '',
        selection: const TextSelection.collapsed(offset: 0),
      );
    }

    final buffer = StringBuffer();
    int currentPos = 0;
    // 按配置规则插入/
    for (final len in splitRules) {
      if (currentPos + len > rawText.length) break;
      buffer.write(rawText.substring(currentPos, currentPos + len));
      buffer.write('/');
      currentPos += len;
    }
    // 拼接剩余未到分割点的内容
    if (currentPos < rawText.length) {
      buffer.write(rawText.substring(currentPos));
    }

    final formattedText = buffer.toString();
    // 修正光标位置，避免输入错位
    int cursorIndex = newValue.selection.baseOffset;
    int validCharCount = 0;
    int slashCount = 0;
    for (int i = 0; i < formattedText.length && i < cursorIndex; i++) {
      if (formattedText[i] == '/') {
        slashCount++;
      } else {
        validCharCount++;
      }
    }
    int finalCursorPos = validCharCount + slashCount;
    finalCursorPos = finalCursorPos.clamp(0, formattedText.length);

    return TextEditingValue(
      text: formattedText,
      selection: TextSelection.collapsed(offset: finalCursorPos),
    );
  }
}

组件内使用方法 #

把格式化器传入TextFormField的inputFormatters参数即可，按需配置分割规则：

TextFormField(
  // 数字类输入可以指定数字键盘，普通文本输入去掉这行即可
  keyboardType: TextInputType.number,
  inputFormatters: [
    // 示例：实现yyyy/MM/dd格式的日期自动分隔
    AutoSlashInputFormatter(splitRules: const [4, 2, 2]),
    // 限制最大输入长度，比如日期格式总长度为10（含两个/）
    LengthLimitingTextInputFormatter(10),
  ],
  decoration: const InputDecoration(
    hintText: '请输入日期',
    border: OutlineInputBorder(),
  ),
)

效果说明 #

• 输入过程中会自动在指定位置插入/，不需要用户手动输入分隔符
• 用户手动输入的/会被自动过滤，不会出现连续//的异常格式
• 支持在文本中间插入、删除内容，光标不会出现跳转到末尾的错位问题
• 修改splitRules参数即可适配不同分割需求，固定位置插/、等间隔插/的场景都可以通用

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