![Flutter组件详解与实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/132/47217132/b_47217132.jpg)
1.2.3 Wrap
虽然Column组件和Row组件都非常适合将子组件沿着某一轴依次排列,但是当遇到子组件较多的情况时,它们很容易因为空间不足而造成溢出。此时或许可以考虑使用Wrap组件,代码如下:
![](https://epubservercos.yuewen.com/CA495B/26581498509216506/epubprivate/OEBPS/Images/Figure-P32_15066.jpg?sign=1738821550-2FwHSkAitKbaPMTEOF5SrRxlVjZlm8dw-0-56aa57ef0a2ba5b43f791a7d49002493)
![](https://epubservercos.yuewen.com/CA495B/26581498509216506/epubprivate/OEBPS/Images/Figure-P33_15080.jpg?sign=1738821550-s6aai5rYd6Ym16jpF7ukLWUENf4QKTWr-0-7b9af0622fbb3cd3e1c5776a97ec8538)
图1-20 溢出的Row组件和自动换行的Wrap组件
Wrap组件的默认行为和Row组件非常相似,将子组件从左到右依次排列,但当空间不足时,Row组件会溢出,而Wrap组件则会自动换行,如图1-20所示。
1.主轴方向与对齐
默认情况下,Wrap组件的主轴是水平方向的,与Row组件相似。通过传入direction:Axis. vertical可将其主轴方向设置为垂直方向,类似Column组件。此外还可以通过spacing属性在主轴方向为每个子组件之间插入固定的留白,例如设置spacing:10.0表示children之间需插入10单位的留白。
设置好主轴方向后,交叉轴就自然确定了。开发者接着可以使用alignment和crossAxisAlignment这2个属性分别设置主轴和交叉轴方向的对齐方式,用法与Row组件和Column组件大同小异。例如,可通过传入alignment:WrapAlignment. center使Wrap的children在主轴方向居中。
2.Run
Wrap组件沿着主轴方向依次排列子组件,当空间不足时便会另起一行或一列。它的每行(或列)被称作为一个Run。当出现多个Run时,它们之间的留白可由runSpacing属性控制。另外,这些Run在Wrap组件内的对齐方式也可以由runAlignment属性设置。
这里需要注意的是,只有当Wrap自身尺寸足够大时才可以观察到runAlignment不同值的区别。例如一个水平方向的Wrap组件共有2行,每行高度均为100单位,且这2行之间按照runSpacing设置了10单位留白,则总占高为210单位。默认情况下Wrap的自身尺寸会匹配其内容,故此时Wrap的高度也是210单位。这样无论怎样通过runAlignment属性修改Run之间的对齐方式,都不会观察到效果。假设Wrap的自身高度比较宽裕(如可在其父级插入Container或SizedBox修改其高度),那么通过runAlignment:WrapAlignment. end就可以将这2行显示在Wrap的底部。