Dart中如何将图片嵌入到自动换行的Text()组件内？

解决方案 #

你要的效果可以直接通过Text.rich搭配WidgetSpan实现，将图片嵌入到文本流中，和普通文字遵循相同的排版规则，完全满足自动换行时图片紧跟文本末尾的需求。
实现代码如下：

AlertDialog(
  content: Text.rich(
    TextSpan(
      children: [
        TextSpan(
          text: 'Are you sure you want to buy this item for ${item.price.toString()}'
        ),
        WidgetSpan(
          alignment: PlaceholderAlignment.middle, // 可调整为baseline等适配文字对齐
          child: Padding(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
            child: Image.asset(
              "path/to/my/image",
              width: 30,
            ),
          ),
        ),
        const TextSpan(text: '?'),
      ],
    ),
  ),
)

原方案失效原因 #

你之前使用Wrap、Row的方案，都是将整段Text作为独立的布局块处理：就算Text内部文字换行，整个Text组件的宽度依然会撑满父容器允许的最大宽度，后续的图片组件作为另一个独立布局块，自然会被排列到下一行。
用WidgetSpan可以直接把图片当作一个特殊字符插入到文本序列中，和文字一同参与换行计算，文本最后一行剩余宽度足够放下图片时就会同行展示，宽度不足时才会和末尾文字一起换行，完全符合你的预期。

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