Flutter中表情包导致的UI渲染问题

发表于 分类于
Flutter中表情包导致的UI渲染问题

在后台发现一个UI渲染卡顿问题，之前忙其他的没太关注。

最近有时间解析了日志，发现了下方有用的日志信息：

1
2
======== Exception caught by rendering library ===================================================== 
The following ArgumentError was thrown during performLayout(): Invalid argument(s): string is not well-formed UTF-16

codeRevier对应类的代码后发现了类似下方的代码：

1
2
3
final text = contentController?.text;
final textLength = text?.length ?? 0;
text = textLength >= 12 ? text!.substring(0, 12) : text ?? '',

其主要作用是当文字超出某个长度后，截取固定长度的字符串。但我们都知道表情的length是2，截取的时候就会概率出现上方的问题。

所以在截取字符串的时候，我们需要用到characters属性来确保截取的字符串是有效的 UTF-16 编码。

具体代码如下：

1
2
3
4
5
6
7
8
String truncateText(String? text, int maxLength) {
  if (text == null) return '';
  final characters = text.characters;
  return characters.length > maxLength ? characters.take(maxLength).toString() : text;
}

//使用
text = truncateText(widget.contentController?.text, 12),