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

Flutter Wrap 图例_前端

Flutter Wrap 图例_前端_02

Flutter Wrap 图例_前端_03

WrapAlignment.spaceAround

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

Flutter Wrap 图例_Flutter_04

Flutter Wrap 图例_Flutter_05

Flutter Wrap 图例_ci_06

crossAxisAlignment

crossAxisAlignment 的类型是 WrapCrossAlignment,一共有 3 个值,用来控制 children 在交叉轴的排列。

crossAxisAlignment.start

crossAxisAlignment.center

crossAxisAlignment.end

Flutter Wrap 图例_默认值_07

Flutter Wrap 图例_前端_08

Flutter Wrap 图例_图例_09

runAlignment

runAxisAlignment 的类型是 WrapAlignment,一共有 6 个值,用来控制 每行 在交叉轴的排列。

WrapAlignment.start

WrapAlignment.center

WrapAlignment.end

Flutter Wrap 图例_默认值_10

Flutter Wrap 图例_图例_11

Flutter Wrap 图例_前端_12

WrapAlignment.spaceAround

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

Flutter Wrap 图例_ci_13

Flutter Wrap 图例_ci_14

Flutter Wrap 图例_图例_15

spacing

spacing 是 children 在主轴方向的间隙。spacing 的默认值是 0

spacing 0

spacing 10

Flutter Wrap 图例_默认值_16

Flutter Wrap 图例_Flutter_17

你可能会问,最左边不能用 spacing 设置空隙吗?答案是不能,spacing 只能设置 child 之间的间隙。

runSpacing

runSpacing 是每行在交叉轴方向的间隙。runSpacing 默认值是 0

runSpacing 0

runSpacing 10

Flutter Wrap 图例_图例_18

Flutter Wrap 图例_前端_19

默认情况下行之间没有空隙,都连在一起了。

runSpacing 也只能设置 行与行之间 的间隙。

direction

direction 是控制按行排还是按列排的,默认是按行排。

Axis.horizontal

Axis.vertical

Flutter Wrap 图例_默认值_20

Flutter Wrap 图例_Flutter_21

VerticalDirection

VerticalDirection 是控制从上往下排,还是从下往上排的。默认是从上往下排。

VerticalDirection.down

VerticalDirection.up

Flutter Wrap 图例_默认值_22

Flutter Wrap 图例_ci_23