从第三方文本编辑器粘贴至TextFormField()时出现的问题

问题原因 #

从记事本复制的文本通常会携带不可见控制字符（如非标准换行符、零宽空格、特殊控制码），Flutter的文本渲染引擎无法正确解析这些字符，导致布局错乱；手动按空格会插入可识别的常规字符，触发组件重新布局与文本解析，因此显示恢复正常。

解决方案 #

1. 使用输入格式化器过滤特殊字符

通过inputFormatters直接过滤文本中的不可见控制字符，确保只有可打印字符进入输入框：

TextFormField(
  inputFormatters: [
    // 过滤ASCII控制字符（保留正常换行、制表符）
    FilteringTextInputFormatter.deny(RegExp(r'[\x00-\x08\x0B\x0C\x0E-\x1F]')),
  ],
  // 其他配置项
)

如果需要更精准的Unicode控制字符过滤，可自定义格式化器：

class CleanPastedTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 移除所有Unicode控制字符，保留正常文本与换行
    final cleanedText = newValue.text.replaceAll(RegExp(r'[\p{C}]', unicode: true), '');
    return TextEditingValue(
      text: cleanedText,
      selection: TextSelection.collapsed(offset: cleanedText.length),
    );
  }
}

// 在TextFormField中使用
TextFormField(
  inputFormatters: [CleanPastedTextFormatter()],
)

2. 统一换行符格式

记事本的换行符为\r\n，部分场景下Flutter解析会出现异常，可统一转换为Flutter兼容的\n：

class NormalizeNewLineFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    final normalizedText = newValue.text.replaceAll('\r\n', '\n');
    return TextEditingValue(
      text: normalizedText,
      selection: TextSelection.collapsed(offset: normalizedText.length),
    );
  }
}

3. 通过控制器监听并修正文本

使用TextEditingController监听文本变化，主动清理异常字符并更新输入框：

final TextEditingController _inputController = TextEditingController();

@override
void initState() {
  super.initState();
  _inputController.addListener(() {
    final currentText = _inputController.text;
    final cleanedText = currentText
        .replaceAll(RegExp(r'[\p{C}]', unicode: true), '')
        .replaceAll('\r\n', '\n');
    
    if (cleanedText != currentText) {
      _inputController.value = _inputController.value.copyWith(
        text: cleanedText,
        selection: TextSelection.collapsed(offset: cleanedText.length),
      );
    }
  });
}

// 绑定到TextFormField
TextFormField(
  controller: _inputController,
)

内容的提问来源于stack exchange，提问作者VIP-Dev-Invisible