Flutter中如何实现阿拉伯语富文本两端对齐？

问题原因 #

你当前的实现把每个单词拆成独立的TextSpan，还手动添加了空格和换行符。这种情况下，RichText会把每个TextSpan当作独立的文本单元，无法在这些单元之间均匀分配空白空间，自然没法实现TextAlign.justify要求的两端对齐——哪怕RTL语言的单行文本能正常工作，多行拆分后的片段也会破坏对齐逻辑。

解决方案 #

核心思路是保留连续的文本流，同时通过单个（或组合的）TextSpan处理字体切换和单词点击事件。具体实现如下：

1. 重构文本生成逻辑 #

不再拆分单词为独立TextSpan，而是生成包含完整文本的TextSpan，仅对需要特殊字体的片段（带\uFD3E和\uFD3F的内容）单独处理。同时通过TapGestureRecognizer的onTapDown事件计算点击位置对应的单词，替代原来的每个单词单独绑定点击事件。

2. 代码实现 #

生成带样式的文本Span

TextSpan preparePageVerses(int pageNum) {
  String rawVerses = versesDataBase[pageNum];
  bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

  // 处理特殊字体的文本片段
  List<TextSpan> textSpans = _buildMixedFontSpans(rawVerses, isDarkMode);

  // 绑定全局点击事件，计算点击的单词
  final recognizer = TapGestureRecognizer()
    ..onTapDown = (TapDownDetails details) {
      _handleWordTap(details, rawVerses);
    };

  return TextSpan(
    children: textSpans,
    recognizer: recognizer,
  );
}

// 拆分文本，为特殊内容应用对应字体
List<TextSpan> _buildMixedFontSpans(String text, bool isDarkMode) {
  final List<TextSpan> spans = [];
  final RegExp bracketPattern = RegExp(r'([\uFD3E].*?[\uFD3F])');
  int lastPos = 0;

  for (Match match in bracketPattern.allMatches(text)) {
    // 添加普通文本片段
    if (match.start > lastPos) {
      spans.add(TextSpan(
        text: text.substring(lastPos, match.start),
        style: TextStyle(
          fontSize: 14.0,
          color: isDarkMode ? Colors.white : Colors.black,
          fontFamily: 'QuranVerseFont',
        ),
      ));
    }
    // 添加带特殊字体的片段
    spans.add(TextSpan(
      text: match.group(0),
      style: TextStyle(
        fontSize: 14.0,
        color: isDarkMode ? Colors.white : Colors.black,
        fontFamily: 'QuranSurahBracketsFont',
      ),
    ));
    lastPos = match.end;
  }

  // 添加剩余的普通文本
  if (lastPos < text.length) {
    spans.add(TextSpan(
      text: text.substring(lastPos),
      style: TextStyle(
        fontSize: 14.0,
        color: isDarkMode ? Colors.white : Colors.black,
        fontFamily: 'QuranVerseFont',
      ),
    ));
  }

  return spans;
}

处理单词点击事件

void _handleWordTap(TapDownDetails details, String fullText) {
  final RenderBox renderBox = context.findRenderObject() as RenderBox;
  final Offset localOffset = renderBox.globalToLocal(details.globalPosition);

  // 用TextPainter计算点击位置对应的文本偏移
  final TextPainter painter = TextPainter(
    text: TextSpan(
      text: fullText,
      style: TextStyle(fontSize: 14.0, fontFamily: 'QuranVerseFont'),
    ),
    textDirection: TextDirection.rtl,
    textAlign: TextAlign.justify,
  )..layout(maxWidth: renderBox.size.width);

  final TextPosition position = painter.getPositionForOffset(localOffset);
  int start = position.offset;
  int end = position.offset;

  // 向前找到单词起始位置（空格或换行）
  while (start > 0 && fullText[start] != ' ' && fullText[start] != '\n') {
    start--;
  }
  // 向后找到单词结束位置（空格或换行）
  while (end < fullText.length && fullText[end] != ' ' && fullText[end] != '\n') {
    end++;
  }

  final String clickedWord = fullText.substring(start, end).trim();
  if (clickedWord.isNotEmpty) {
    print(clickedWord);
  }
}

调用RichText

RichText(
  textAlign: TextAlign.justify,
  textDirection: TextDirection.rtl,
  text: preparePageVerses(2),
),

关键说明 #

• 保留连续文本流后，RichText能正确计算RTL语言的两端对齐间距，实现每行单词均匀分布。
• 通过TextPainter获取点击位置对应的文本偏移，再通过字符串截取定位单词，替代原来的每个单词单独绑定点击事件，逻辑更统一。
• 特殊字体的片段通过正则匹配拆分，既保证了字体正确，又不破坏文本流的连续性。

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