Flutter中如何在多行文本内嵌套Widget组件？

Flutter自带的Text组件没法直接嵌套Widget，但用RichText搭配WidgetSpan就能轻松实现多行文本里嵌入任意Widget的需求，下面是具体实现方案：

核心实现思路 #

用RichText作为整体文本容器，通过TextSpan组合普通文本内容，再用WidgetSpan包裹需要嵌入的Widget，让Widget和文本流无缝融合，支持自动换行。

完整代码示例 #

RichText(
  text: TextSpan(
    // 继承当前上下文的默认文本样式
    style: DefaultTextStyle.of(context).style,
    children: [
      const TextSpan(text: "这是一段会自动换行的多行文本，"),
      WidgetSpan(
        // 调整Widget与文本的垂直对齐方式
        alignment: PlaceholderAlignment.middle,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(4),
          ),
          child: const Text(
            "内嵌容器",
            style: TextStyle(color: Colors.white, fontSize: 14),
          ),
        ),
      ),
      const TextSpan(text: "，后续的文本内容会自动换行，嵌入的容器组件会跟着文本流排列，完全适配多行排版的需求。"),
    ],
  ),
  // 开启自动换行
  softWrap: true,
)

效果展示 #

额外注意事项 #

• 通过WidgetSpan的alignment参数可以调整嵌入Widget和文本的垂直对齐（比如PlaceholderAlignment.top/middle/bottom）
• 如果需要嵌入图片、按钮等其他Widget，直接替换WidgetSpan的child即可
• 若需多段文本嵌套Widget，可拆分多个TextSpan和WidgetSpan组合使用

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