Flutter中RTL文本方向下Emoji在控制器中反转的问题

问题原因 #

设置TextDirection.rtl仅改变文本的视觉渲染顺序，并未修改字符串本身的底层字符存储顺序。像🤩这类Unicode中性字符，在RTL布局中会被调整到视觉起始位置，但实际字符串仍保留你输入的hello🤩顺序，导致控制器和onChanged返回值与显示效果不符。

解决方案 #

要让控制器的值与RTL显示顺序一致，需要手动处理文本的双向字符顺序，以下是两种可行方法：

方法1：自定义文本处理逻辑

在onChanged回调中处理文本，将其转换为符合RTL视觉顺序的字符串，再更新控制器（需避免循环触发）：

Widget build(BuildContext context) {
  return TextField(
    maxLines: null,
    onChanged: (value) {
      final processedText = _convertToRTLOrder(value);
      if (smcontroller.text != processedText) {
        smcontroller.value = smcontroller.value.copyWith(
          text: processedText,
          selection: TextSelection.collapsed(offset: processedText.length),
        );
      }
    },
    autofocus: false,
    controller: smcontroller,
    textDirection: TextDirection.rtl,
    textAlignVertical: TextAlignVertical.center,
    style: const TextStyle(
      color: Color(0xffffffff),
    ),
    decoration: InputDecoration(
      hintText: AppLocalizations.translate('Type a message'),
      hintTextDirection: TextDirection.rtl,
    ),
  );
}

// 处理文本，调整为RTL显示对应的字符顺序
String _convertToRTLOrder(String text) {
  // 示例逻辑：将所有表情类中性字符移到开头，普通文本移到后面
  final emojiRegex = RegExp(r'[\p{Emoji}]', unicode: true);
  final emojis = emojiRegex.allMatches(text).map((m) => m.group(0)).join();
  final nonEmojis = text.replaceAll(emojiRegex, '');
  return '$emojis$nonEmojis';
}

方法2：使用双向文本处理工具

借助专门处理Unicode双向文本的工具（基于Bidi算法实现），直接将输入文本转换为符合RTL布局的存储顺序，确保控制器值与视觉显示一致。这类工具会自动根据字符类型和文本方向规则调整顺序，比手动逻辑更适配复杂文本场景。

注意事项 #

• 修改控制器值时必须添加判断条件，避免onChanged回调被反复触发导致循环。
• 混合LTR、RTL字符的复杂场景下，优先使用成熟的双向文本处理工具，避免手动逻辑覆盖不全。

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