如何在Flutter的TextField文本输入框中实现输入掩码功能

要实现下图所示的固定格式输入掩码效果，可通过以下两种方案实现：

方案1：使用第三方包快速实现 #

推荐使用封装完善的flutter_masked_text包，适合绝大多数常规掩码场景：

• 第一步，在pubspec.yaml中添加依赖：

  dependencies:
    flutter:
      sdk: flutter
    flutter_masked_text: ^2.0.0
  

• 第二步，执行flutter pub get安装依赖后，直接在代码中调用：

  import 'package:flutter_masked_text/flutter_masked_text.dart';
  
  // 初始化掩码控制器，mask参数对应你需要的格式，示例为日期格式DD/MM/YYYY
  final MaskedTextController dateController = MaskedTextController(mask: '00/00/0000');
  
  // 绑定到TextField即可生效
  TextField(
    controller: dateController,
    keyboardType: TextInputType.number,
    decoration: const InputDecoration(
      labelText: '请输入日期',
      hintText: 'DD/MM/YYYY',
    ),
  )
  

掩码规则说明：0代表数字占位符，A代表字母占位符，@代表字母数字混合占位符，可按需组合，比如手机号格式可设置mask: '000-0000-0000'，银行卡号可设置mask: '0000 0000 0000 0000'。

方案2：自定义输入格式化器实现 #

如果不想引入第三方依赖，可通过自定义TextInputFormatter实现完全可控的掩码规则：

• 首先实现自定义格式化类：

  import 'package:flutter/services.dart';
  
  class CustomMaskFormatter extends TextInputFormatter {
    // 掩码格式，示例为'00/00/0000'
    final String mask;
    // 分隔符，可根据需求修改为'-'、空格等
    final String separator;
  
    CustomMaskFormatter({required this.mask, required this.separator});
  
    @override
    TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
      if (newValue.text.isEmpty) {
        return newValue.copyWith(text: '');
      }
      // 先移除已输入的分隔符，避免重复计算
      final input = newValue.text.replaceAll(separator, '');
      final buffer = StringBuffer();
      int maskPos = 0;
      int inputPos = 0;
  
      while (maskPos < mask.length && inputPos < input.length) {
        if (mask[maskPos] == separator) {
          buffer.write(separator);
          maskPos++;
        } else {
          buffer.write(input[inputPos]);
          maskPos++;
          inputPos++;
        }
      }
  
      final output = buffer.toString();
      return newValue.copyWith(
        text: output,
        // 保持光标在输入内容末尾
        selection: TextSelection.collapsed(offset: output.length),
      );
    }
  }
  

• 绑定到TextField的inputFormatters属性即可生效：

  TextField(
    keyboardType: TextInputType.number,
    decoration: const InputDecoration(
      labelText: '请输入日期',
      hintText: 'DD/MM/YYYY',
    ),
    inputFormatters: [
      // 限制只允许输入数字
      FilteringTextInputFormatter.digitsOnly,
      // 绑定自定义掩码格式化器
      CustomMaskFormatter(mask: '00/00/0000', separator: '/'),
    ],
  )
  

如果需要额外的格式校验，可在TextField的onChanged回调或者Form表单的validator属性中添加长度、规则校验逻辑即可。

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