Flutter：如何实现RichText组件内短文本始终位于长文本末尾（跨行适配）

这问题我之前也碰到过！用单纯的RichText确实没法直接实现这种「末尾跟随」的效果，因为TextSpan只是单纯的文本片段拼接，不会自动填充空白来对齐到行尾。给你两种靠谱的解决方案：

方案一：Row + Expanded组合（最简单直接） #

这种方法不需要复杂的文本Span嵌套，用基础布局组件就能快速实现需求：

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Expanded(
      child: Text(
        'I am the way and the truth and the life. No one comes to the Father except through me.',
        softWrap: true,
        // 这里可以自定义长文本的样式
        style: TextStyle(color: Colors.black87),
      ),
    ),
    // 这里可以自定义短文本的样式
    Text('John', style: TextStyle(color: Colors.blueGrey)),
  ],
)

原理说明 #

Expanded会让长文本占据Row中除短文本外的所有水平空间，当长文本长度超过一行时会自动换行，短文本会自然贴在最后一行的末尾位置。如果需要调整两个文本的间距，只需要在短文本前加一个SizedBox(width: 8)即可。

方案二：基于RichText的实现（适配复杂文本样式） #

如果你必须用RichText来承载文本（比如需要混合多种复杂样式的文本片段），可以通过WidgetSpan嵌入布局组件来实现空白填充：

RichText(
  text: TextSpan(
    // 继承默认文本样式，避免样式错乱
    style: DefaultTextStyle.of(context).style,
    children: [
      TextSpan(
        text: 'I am the way and the truth and the life. No one comes to the Father except through me.',
        style: TextStyle(color: Colors.black87),
      ),
      WidgetSpan(
        // 设置基线对齐，保证嵌入组件和文本在同一行
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Spacer(),
            Text('John', style: TextStyle(color: Colors.blueGrey)),
          ],
        ),
      ),
    ],
  ),
)

原理说明 #

WidgetSpan允许我们在RichText的文本流中插入任意Widget，这里通过Row + Spacer的组合，让Spacer占据当前行的剩余空白空间，从而把短文本"John"推到行尾。注意要设置对齐方式，保证嵌入的Widget和文本在同一基线，避免出现上下错位的情况。

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