Flutter中RichText如何忽略Transform变换的WidgetSpan宽度？

问题背景 #

需要将RichText组件内的部分文本移动到前一个单词的大致上方位置，经测试采用如下组件层级实现效果最优：

RichText
|
- TextSpan
- WidgetSpan
| |
| - Text
- TextSpan

初始实现代码如下：

RichText(
  text: TextSpan(
    style: TextStyle(
      color: Color(0xff696d77),
      fontSize: 30,
    ),
    children: [
      TextSpan(
        text: "before",
        style: const TextStyle(color: Color(0xff6e9ab1)),
      ),
      WidgetSpan(
        child: Transform.translate(
          offset: const Offset(-10, -20),
          child: const Text(
            "above",
            style: TextStyle(fontSize: 30, color: Colors.red),
          ),
        ),
      ),
      TextSpan(text: ' '),
      TextSpan(
        text: "after",
      ),
    ]
  )
)

该实现的位移效果基本符合预期，但before与after文本之间会出现和above文本等宽的多余空白间距，需要消除该空白，实现偏移文本叠加显示、不占用水平排版空间的效果。

问题原因 #

多余空白来自WidgetSpan的排版逻辑：WidgetSpan默认会按照子组件的固有尺寸预留排版占位，即使通过Transform.translate将文本视觉偏移到其他位置，排版层的占位仍然保留，因此会挤开后续文本产生空白。

修复代码 #

通过0宽度占位+溢出显示的方式，让WidgetSpan不占用水平排版空间，同时保证偏移的文本正常显示，修复后完整代码如下：

RichText(
  text: TextSpan(
    style: const TextStyle(
      color: Color(0xff696d77),
      fontSize: 30,
    ),
    children: [
      const TextSpan(
        text: "before",
        style: TextStyle(color: Color(0xff6e9ab1)),
      ),
      WidgetSpan(
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: Transform.translate(
          offset: const Offset(-10, -20),
          child: const SizedBox(
            width: 0,
            child: OverflowBox(
              maxWidth: double.infinity,
              alignment: Alignment.centerLeft,
              child: Text(
                "above",
                style: TextStyle(fontSize: 30, color: Colors.red),
              ),
            ),
          ),
        ),
      ),
      const TextSpan(text: ' '),
      const TextSpan(
        text: "after",
      ),
    ]
  )
)

关键配置说明 #

• SizedBox(width: 0)：将WidgetSpan的水平占位宽度设为0，从排版根源消除多余空白
• OverflowBox：允许内部的Text组件超出0宽度的父组件限制正常渲染，不会因为父组件宽度为0被裁剪
• WidgetSpan的alignment和baseline参数：保证垂直方向对齐逻辑和普通文本一致，避免出现行高错位问题

如果偏移文本的宽度固定，也可以直接给后续文本添加对应宽度的负水平偏移抵消空白，但该方案需要手动计算文本宽度，字体大小、系统字体缩放变化时容易出现适配问题，优先使用上述0占位方案。

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