如何实现Row组件中子组件超出设备宽度时自动换行？

在Flutter里，原生的Row组件是强制单行布局的，没法直接让子组件换行。要实现超出宽度自动换行的需求，最直接的方案是用**Wrap组件**来替代Row——它专门设计用来处理这种“空间不足时自动换行”的流式布局场景。

核心实现思路 #

Wrap的行为和Row类似，但当子组件总宽度超过父容器的可用宽度时，会自动将超出的子组件换行到下一行。你可以通过调整spacing（子组件水平间距）和runSpacing（行与行之间的垂直间距）来控制布局的紧凑度，对齐方式也和Row的配置逻辑一致，上手成本很低。

代码示例 #

下面是一个简单的可运行示例，展示如何用Wrap实现你要的效果：

Wrap(
  // 可选：设置子组件之间的水平间距
  spacing: 8.0,
  // 可选：设置换行后行与行的垂直间距
  runSpacing: 8.0,
  // 可选：控制子组件在主轴上的对齐方式，和Row的mainAxisAlignment用法一致
  alignment: WrapAlignment.start,
  children: [
    Container(width: 150, height: 50, color: Colors.red),
    Container(width: 150, height: 50, color: Colors.green),
    Container(width: 150, height: 50, color: Colors.blue),
    Container(width: 150, height: 50, color: Colors.yellow),
  ],
)

额外说明 #

如果你因为某些特定场景必须使用Row（比如需要结合Row特有的嵌套逻辑），那可以考虑在Row内部嵌套Wrap，但这种做法其实没必要——Wrap已经完全覆盖了“单行+自动换行”的需求，是最贴合你场景的最优解。如果误选了SingleChildScrollView配合Row，那只会实现横向滚动，和你要的换行效果完全不符，注意避开这个误区。

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