我之前刚好碰到过一模一样的需求——要展示服务器返回的带制表符的文本，既要像编辑器那样对齐制表位，又得支持跨段落选中。Text/RichText默认忽略或把制表符当普通空格的问题确实头疼，而且拆分Text组件会破坏选中体验，给你两个靠谱的解决方案：

方案一：自定义TextSpan实现精确对齐（支持任意字体） #

这个方法通过计算文本宽度，用空白WidgetSpan填充制表位的剩余空间，既能保证对齐精准，又能让整个文本保持可选中的完整性。核心思路是用SelectableText.rich包裹处理后的TextSpan，这样整个文本是一个可选择的整体。

实现代码 #

import 'package:flutter/material.dart';

TextSpan buildTabAlignedTextSpan(String rawText, TextStyle textStyle) {
  final inlineSpans = <InlineSpan>[];
  final lines = rawText.split('\n');
  const tabCharCount = 4; // 自定义每个制表位对应多少个字符宽度

  // 先计算单个空格的宽度（用于校准制表位）
  final spacePainter = TextPainter(
    text: TextSpan(text: ' ', style: textStyle),
    textDirection: TextDirection.ltr,
  )..layout();
  final singleCharWidth = spacePainter.width;
  final tabTotalWidth = singleCharWidth * tabCharCount;

  for (int lineIndex = 0; lineIndex < lines.length; lineIndex++) {
    final currentLine = lines[lineIndex];
    final lineSegments = currentLine.split('\t');
    double currentLineOffset = 0;

    for (int segIndex = 0; segIndex < lineSegments.length; segIndex++) {
      final segment = lineSegments[segIndex];
      // 添加当前文本片段
      inlineSpans.add(TextSpan(text: segment, style: textStyle));

      // 计算当前片段的宽度，更新行偏移
      final segPainter = TextPainter(
        text: TextSpan(text: segment, style: textStyle),
        textDirection: TextDirection.ltr,
      )..layout();
      currentLineOffset += segPainter.width;

      // 非最后一个片段，填充制表位剩余宽度
      if (segIndex != lineSegments.length - 1) {
        final remainingWidth = tabTotalWidth - (currentLineOffset % tabTotalWidth);
        inlineSpans.add(WidgetSpan(
          child: SizedBox(width: remainingWidth),
        ));
        currentLineOffset += remainingWidth;
      }
    }

    // 添加换行（最后一行不需要）
    if (lineIndex != lines.length - 1) {
      inlineSpans.add(const TextSpan(text: '\n'));
      currentLineOffset = 0;
    }
  }

  return TextSpan(children: inlineSpans);
}

// 使用示例
class TabAlignedText extends StatelessWidget {
  final String text;
  final TextStyle style;

  const TabAlignedText({super.key, required this.text, required this.style});

  @override
  Widget build(BuildContext context) {
    return SelectableText.rich(
      buildTabAlignedTextSpan(text, style),
      textDirection: TextDirection.ltr,
    );
  }
}

用法 #

TabAlignedText(
  text: '用户ID\t用户名\t注册时间\n1001\t张三\t2023-01-01\n1002\t李四\t2023-02-15',
  style: const TextStyle(fontSize: 16, fontFamily: 'PingFang SC'),
)

方案二：等宽字体下的快速替换（适合简单场景） #

如果你的应用可以固定使用等宽字体（比如Consolas、Monaco），那直接把制表符替换成对应数量的空格就行，代码超简单：

SelectableText(
  rawText.replaceAll('\t', '    '), // 4个空格对应一个制表位
  style: const TextStyle(fontFamily: 'Consolas', fontSize: 16),
)

这个方法的好处是零额外计算，但缺点也很明显——非等宽字体下，不同字符宽度不一样，对齐会错位。

关键注意点 #

• 为什么不用拆分Text组件？因为每个独立的Text组件是单独的选择单元，跨组件的文本无法连续选中，而SelectableText.rich把所有Span整合为一个可选择的整体，完美解决这个问题。
• 方案一中的tabCharCount可以根据需求调整，比如设置为8更贴近编辑器的默认制表位。

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