Flutter TextField输入RTL语言时Emoji位置偏移问题求助

问题重现 #

关联代码 #

TextEditingController? textFieldKeywordsController;
Widget textFieldKeywords(){
  return TextField(
    controller: textFieldKeywordsController,
    cursorColor: Colors.white,
    onChanged: (str){
      print(str);
    },
  );
}

问题现象 #

• LTR语言（如英文）：输入「Hello world 😊」时，TextField显示与打印内容一致，符合预期。
• RTL语言（如阿拉伯语）：输入「😊 مرحبا يا عالم」时，TextField显示正常，但打印内容及Text组件中Emoji会偏移至末尾，变为「مرحبا يا عالم 😊」，聊天预览组件也存在同样问题。

问题原因 #

这是双向文本（BIDI）算法的特性：Emoji属于中性字符，在RTL语境下会被默认归类为RTL方向，导致逻辑字符串的编码顺序与视觉显示顺序不一致——TextField会处理视觉顺序渲染，但原始字符串的逻辑顺序是RTL文本在前、Emoji在后，直接打印或用Text组件渲染时会按逻辑顺序展示。

修复方案 #

方案1：用Unicode控制字符强制Emoji方向 #

在Emoji前后添加LTR强制标记（\u200E），强制Emoji保持LTR方向，让逻辑顺序与视觉顺序对齐。

封装处理函数：

String fixEmojiInRtlText(String input) {
  // 匹配常见Emoji的正则，可按需扩展
  RegExp emojiRegex = RegExp(
    r'[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}]',
    unicode: true,
  );
  return emojiRegex.replaceAllMapped(input, (match) => '\u200E${match.group(0)}\u200E');
}

使用方式：

// 输入回调中处理
onChanged: (str) {
  String fixedStr = fixEmojiInRtlText(str);
  print(fixedStr);
}

// 显示文本时处理
Text(fixEmojiInRtlText(messageContent))

方案2：让Text组件正确渲染双向文本 #

通过指定textDirection或用Directionality包裹，让Text组件按视觉顺序渲染RTL文本：

// 直接指定RTL方向
Text(
  messageContent,
  textDirection: TextDirection.rtl,
)

// 或用Directionality包裹全局设置
Directionality(
  textDirection: TextDirection.rtl,
  child: Text(messageContent),
)

如果需要根据语言动态切换方向，可以结合Locale判断文本方向，确保和TextField的渲染逻辑一致。

方案3：通过TextPainter获取视觉顺序字符串 #

利用TextPainter将逻辑字符串转换为视觉顺序字符串，适合需要严格匹配TextField显示内容的场景：

String getVisualOrderText(String logicalText, TextDirection direction) {
  TextPainter painter = TextPainter(
    text: TextSpan(text: logicalText),
    textDirection: direction,
    locale: Locale('ar'), // 对应RTL语言的Locale
  )..layout();
  return painter.toPlainText();
}

使用方式：

onChanged: (str) {
  String visualText = getVisualOrderText(str, TextDirection.rtl);
  print(visualText);
}

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