Flutter Wrap组件：spacing、runSpacing与runAlignment属性差异解析

Wrap是Flutter里用来处理子组件自动换行的布局组件，当Row/Column空间不足导致子组件溢出时，Wrap会自动将超出的子组件放到下一行（或列），下面详细拆解它的三个核心属性：

一、spacing 和 runSpacing 的区别 #

这两个属性都是用来控制间距，但作用范围完全不同：

• spacing：控制同一行（或列）内部子组件之间的间距。比如水平方向的Wrap里，就是左右相邻两个子组件的水平距离；如果是垂直方向的Wrap，就是上下相邻子组件的垂直距离。
• runSpacing：控制不同行（或列）之间的整体间距。比如水平Wrap中，第一行整体和第二行整体之间的垂直距离；垂直Wrap中，第一列和第二列之间的水平距离。

举个直观的代码例子：

Wrap(
  direction: Axis.horizontal, // 默认水平方向
  spacing: 12, // 同一行子组件左右间距12
  runSpacing: 18, // 行与行之间的垂直间距18
  children: [
    Container(width: 90, height: 60, color: Colors.orange),
    Container(width: 90, height: 60, color: Colors.purple),
    Container(width: 90, height: 60, color: Colors.teal),
    Container(width: 90, height: 60, color: Colors.amber),
  ],
)

在这个例子里，同一行的橙色和紫色组件之间隔12，第一行和第二行的垂直间隔是18。

二、runAlignment 属性的含义与用法 #

runAlignment是用来控制每一行（或列）在Wrap的剩余空间中的对齐方式，注意它管的是整行的位置，不是子组件在该行内的对齐（子组件在行内的对齐用alignment属性）。

它的取值是WrapAlignment枚举，常见的几个值用法如下：

• WrapAlignment.start：所有行（列）靠Wrap的起始端对齐。水平Wrap里就是左对齐，垂直Wrap里就是顶部对齐。
• WrapAlignment.end：所有行（列）靠Wrap的结束端对齐。水平Wrap里是右对齐，垂直Wrap里是底部对齐。
• WrapAlignment.center：所有行（列）在Wrap的剩余空间里居中。
• WrapAlignment.spaceBetween：行（列）之间均匀分布，首尾两行（列）贴紧Wrap的两端。
• WrapAlignment.spaceAround：每一行（列）的两侧间距相等，首尾行（列）到Wrap边缘的间距是中间行间距的一半。
• WrapAlignment.spaceEvenly：所有行（列）之间的间距，包括首尾行到Wrap边缘的间距，全部相等。

代码示例：

Wrap(
  runSpacing: 10,
  runAlignment: WrapAlignment.spaceEvenly, // 行与行之间及首尾到边缘间距相等
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Container(width: 100, height: 50, color: Colors.blue),
    Container(width: 220, height: 50, color: Colors.green),
  ],
)

如果这个Wrap的高度足够，三行（假设宽度不足换行）会均匀分布在Wrap的垂直空间里，顶部、行之间、底部的间距都一样。

内容的提问来源于stack exchange，提问作者irfan ap