Flutter使用Wrap组件溢出时子元素不同行，如何让图片紧跟文本末尾？

问题原因：Wrap组件会将每一个子组件作为独立的流式布局单元处理，当Text组件的宽度撑满整行时，后续的Image子组件会被自动换行，因此出现你遇到的问题。

你需要将图片嵌入到文本流中，让它作为文本的一部分参与排版，就能实现图片始终跟随文本最后一行末尾的效果，可使用Text.rich配合WidgetSpan实现，示例代码如下：

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: subtitle,
        style: TextStyle(color: Color(COLOR_PRIMARY), fontSize: 12.5),
      ),
      WidgetSpan(
        // 可根据需求调整对齐方式，可选值有baseline、top、bottom等
        alignment: PlaceholderAlignment.middle,
        child: Image(
          image: AssetImage(drinkNameToImage[widget.post.cocktail] as String),
          width: 20,
          height: 20,
        ),
      ),
    ],
  ),
)

如果需要调整图片和文字的对齐效果，可以修改WidgetSpan的alignment参数：

• 需求为图片和文字中部对齐：使用PlaceholderAlignment.middle
• 需求为图片和文字底部对齐：使用PlaceholderAlignment.baseline，同时补充baseline: TextBaseline.alphabetic参数即可

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