Flutter如何实现TextField输入内容自动格式化为MAC地址格式

完全可行，直接通过Flutter内置的TextInputFormatter能力就能实现，不需要依赖第三方库，也不需要额外监听控制器做复杂的文本处理，可完全匹配需求。

核心实现逻辑 #

自定义输入格式化类，拦截每次输入变更事件，依次做三个处理：

• 剥离文本中已有的分隔符，拿到纯输入的有效字符
• 有效字符长度达到阈值（排除分隔符共16位）时直接截断，禁止后续输入
• 按每2个字符为一组插入:分隔符，同时修正光标位置，避免分隔符插入后光标错位

自定义格式化器代码 #

class MacAddressInputFormatter extends TextInputFormatter {
  static const int _segmentLength = 2;
  static const String _separator = ':';
  static const int _maxRawLength = 16; // 排除分隔符后的最大有效输入长度

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // 提取纯有效字符，过滤所有已存在的分隔符
    String rawContent = newValue.text.replaceAll(_separator, '');
    // 超出最大长度直接截断，不再接收后续输入
    if (rawContent.length > _maxRawLength) {
      rawContent = rawContent.substring(0, _maxRawLength);
    }

    // 按段拼接分隔符
    final buffer = StringBuffer();
    for (int i = 0; i < rawContent.length; i += _segmentLength) {
      final segmentEnd = (i + _segmentLength > rawContent.length) 
          ? rawContent.length 
          : i + _segmentLength;
      buffer.write(rawContent.substring(i, segmentEnd));
      // 非最后一段则追加分隔符
      if (segmentEnd != rawContent.length) {
        buffer.write(_separator);
      }
    }

    // 修正光标位置
    int cursorOffset = buffer.length;
    final newInputOffset = newValue.selection.baseOffset;
    if (newInputOffset < buffer.length) {
      cursorOffset = newInputOffset;
      // 光标落在分隔符前时自动后移一位，避免输入位置错乱
      if (cursorOffset > 0 && buffer.toString()[cursorOffset - 1] == _separator) {
        cursorOffset += 1;
      }
    }

    return TextEditingValue(
      text: buffer.toString(),
      selection: TextSelection.collapsed(offset: cursorOffset),
    );
  }
}

组件接入方式 #

直接将格式化器传入TextField的inputFormatters配置即可，额外可搭配内置的字符过滤规则，限制仅能输入MAC地址合法的十六进制字符：

TextField(
  inputFormatters: [
    // 限制仅允许输入十六进制字符和分隔符，过滤非法输入
    FilteringTextInputFormatter.allow(RegExp(r'[0-9a-fA-F:]')),
    MacAddressInputFormatter(),
  ],
  decoration: const InputDecoration(
    labelText: 'MAC地址',
    border: OutlineInputBorder(),
  ),
)

实际效果 #

• 输入过程中每输入2个有效字符，自动插入:分隔符，无需用户手动输入
• 自动去重用户误输入的冒号，不会出现连续分隔符的格式错误
• 有效字符（排除冒号）达到16位时自动拦截后续输入，打字、粘贴长内容场景均生效
• 自动适配光标位置，不会出现分隔符插入后光标跳转到末尾、卡在分隔符位置的异常

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