Flutter Wrap 用来排列多个 child,可以自动换行。只看文档对于 child 如何排列还不是很直观,本文以图例的方式解说每个参数的效果。
- spaceAround 每个child 的左右空白一样
- spaceBetween 最左最右没有空白,在 child 之间平分。
- spaceEvenly 等分空白
如果没有特别说明 direction = Axis.horizontal,verticalDirection = VerticalDirection.down。
alignment
alignment 的类型是 WrapAlignment,一共有 6 个值,用来控制 children 在主轴的排列。
WrapAlignment.start | WrapAlignment.center | WrapAlignment.end |
WrapAlignment.spaceAround | WrapAlignment.spaceBetween | WrapAlignment.spaceEvenly |
crossAxisAlignment
crossAxisAlignment 的类型是 WrapCrossAlignment,一共有 3 个值,用来控制 children 在交叉轴的排列。
crossAxisAlignment.start | crossAxisAlignment.center | crossAxisAlignment.end |
runAlignment
runAxisAlignment 的类型是 WrapAlignment,一共有 6 个值,用来控制 每行 在交叉轴的排列。
WrapAlignment.start | WrapAlignment.center | WrapAlignment.end |
WrapAlignment.spaceAround | WrapAlignment.spaceBetween | WrapAlignment.spaceEvenly |
spacing
spacing 是 children 在主轴方向的间隙。spacing 的默认值是 0
spacing 0 | spacing 10 |
你可能会问,最左边不能用 spacing 设置空隙吗?答案是不能,spacing 只能设置 child 之间的间隙。
runSpacing
runSpacing 是每行在交叉轴方向的间隙。runSpacing 默认值是 0
runSpacing 0 | runSpacing 10 |
默认情况下行之间没有空隙,都连在一起了。
runSpacing 也只能设置 行与行之间 的间隙。
direction
direction 是控制按行排还是按列排的,默认是按行排。
Axis.horizontal | Axis.vertical |
VerticalDirection
VerticalDirection 是控制从上往下排,还是从下往上排的。默认是从上往下排。
VerticalDirection.down | VerticalDirection.up |