Flutter中LengthLimitingTextInputFormatter emoji计数异常求助

我之前也碰到过这个糟心的问题，那些由多个Unicode码点组成的emoji确实容易搞乱计数！核心原因是Flutter默认的LengthLimitingTextInputFormatter是按Unicode码点数量统计的，而不是按我们肉眼感知到的**单个视觉字符（grapheme簇）**来计算。比如你提到的️，它实际包含了多个码点，所以被计为3个字符，但我们希望它只算1个。

解决方案：自定义基于视觉字符的输入限制器 #

我们需要创建一个自定义的TextInputFormatter，专门按视觉字符的数量来限制输入长度，再配合你已经在用的Characters计数逻辑，就能彻底解决这个问题。

1. 实现自定义输入限制器

class GraphemeLengthLimitingTextInputFormatter extends TextInputFormatter {
  final int maxLength;

  GraphemeLengthLimitingTextInputFormatter(this.maxLength);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 计算新输入文本的视觉字符数量
    final newGraphemeCount = Characters(newValue.text).length;
    
    if (newGraphemeCount <= maxLength) {
      return newValue; // 未超出限制，直接返回
    }
    
    // 截断文本到最大允许的视觉字符数量
    final truncatedText = Characters(newValue.text).take(maxLength).toString();
    return TextEditingValue(
      text: truncatedText,
      selection: TextSelection.collapsed(offset: truncatedText.length),
      composing: TextRange.empty,
    );
  }
}

2. 在TextField中整合自定义限制器和计数器

把原来的LengthLimitingTextInputFormatter替换成我们自定义的，同时保留你之前的计数器逻辑：

TextField(
  controller: messageController,
  inputFormatters: [
    GraphemeLengthLimitingTextInputFormatter(250), // 替换默认限制器
  ],
  decoration: InputDecoration(
    counter: Text(
      "${Characters(messageController.text).length}/250",
      style: TextStyle(fontStyle: FontStyle.italic),
    ),
    // 其他装饰属性...
  ),
  // 其他TextField属性...
)

为什么这样能解决问题？ #

• 自定义限制器通过Characters(newValue.text).length计算视觉字符数量，确保每个emoji都被计为1个。
• 当输入或粘贴的文本超出250个视觉字符时，会自动截断到刚好250个，不会因为emoji的多码点特性导致提前触发限制。
• 计数器和限制器使用完全一致的计数逻辑，保证显示的计数和实际输入限制完全匹配。

这样调整后，你就能顺利输入250个emoji，同时计数器也会准确显示250/250啦！

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