Flutter中TextSpan搭配WidgetSpan使用出现换行偏移问题如何解决

• WidgetSpan会被Flutter渲染引擎视为不可拆分的独立块元素，换行时会作为一个整体排版，只要当前行剩余宽度不足以放下整个WidgetSpan，就会将其整体移动到下一行，因此会出现和相邻TextSpan拆分的问题。

方案1：使用高版本Flutter原生属性（最优） #

Flutter 3.10及以上版本已经原生支持TextStyle的圆角背景配置，无需使用WidgetSpan，直接用普通TextSpan即可实现效果，支持文本自动换行、背景跟随文本拆分到多行：

child: Text.rich(
  TextSpan(
    style: TextStyle(
        fontSize: 25,
        color: Colors.deepPurpleAccent,
        height: 1.5),
    children: [
      TextSpan(
        text: typed,
        style: TextStyle(
          fontSize: 25,
          height: 1.5,
          color: Colors.white,
          // 直接配置背景色和圆角即可
          backgroundColor: Colors.lightBlue,
          backgroundRadius: Radius.circular(10),
        ),
      ),
      TextSpan(text: toBeTyped),
    ],
  ),
),

方案2：低版本Flutter兼容方案 #

如果无法升级到3.10+版本，可以自定义RenderObject重写文本绘制逻辑：

• 继承RenderParagraph，在paint方法中先通过TextPainter.getBoxesForSelection获取需要加背景的文本范围对应的所有文本框
• 遍历所有文本框，绘制对应圆角矩形背景
• 最后再执行原有的文本绘制逻辑
• 将自定义RenderParagraph封装为Widget后替换原有的Text.rich组件即可，该方案同样支持文本自动拆分换行，背景跟随文本适配。

临时兼容方案（仅适用于短文本场景） #

如果typed文本长度不会超过单行宽度，可以给WidgetSpan添加对齐配置缓解换行错位问题：

WidgetSpan(
  alignment: PlaceholderAlignment.baseline,
  baseline: TextBaseline.alphabetic,
  child: Container(
    // 原有代码不变
  )
)

注意该方案无法解决typed文本长度超过单行宽度的拆分需求。

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