作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

Wrap

在Flutter中Wrap是流式布局控件，Row和Column在布局上是很好用，然而有一个毛病，如果当子控件数量过多导致Row或Column装载不下的时候，就会呈现UI页面上的谬误。Wrap能够完满的防止这个问题，当控件过多一行显示不全的时候，Wrap能够换行显示。

当然Wrap跟Row和Column有着很多类似的中央。
咱们先来看Wrap的构造函数：

Wrap({    // Key    Key key,    // 子控件显示方向， 有垂直方向 程度方向两个值    this.direction = Axis.horizontal,    /// 子控件的 布局形式  跟Column的 mainAxisalignment相似     this.alignment = WrapAlignment.start,    /// 子控件 主轴方向间距    this.spacing = 0.0,    /// 子控件 穿插方向的 布局形式    this.runAlignment = WrapAlignment.start,    /// 子控件 穿插方向间距    this.runSpacing = 0.0,    /// 穿插轴的对齐形式 与 Column 的crossAxisAlignment 一样    this.crossAxisAlignment = WrapCrossAlignment.start,    /// 书写方向 与 Column的 textDirection 一样    this.textDirection,    /// Wrap穿插轴方向上子控件的布局方向    this.verticalDirection = VerticalDirection.down,    /// 裁剪形式    this.clipBehavior = Clip.hardEdge,    /// 子控件    List<Widget> children = const <Widget>[],})

上面咱们就来看看这些参数

direction

direction有两个参数值Axis.horizontal和Axis.vertical，很显著它治理着Wrap的是程度布局还是垂直布局。
Axis.horizontal示意子控件按程度方向布局，Axis.vertical示意子控件按垂直方向布局显示。

Axis.horizontal
成果如下：

Axis.vertical
成果如下：

alignment

alignment接管一个WrapAlignment类型的枚举，WrapAlignment共有六个枚举值，如下：

WrapAlignment的枚举值与成果与 Column 的 mainAxisAlignment成果一样，想理解的能够看之前的文章
枚举值形容
start与 开始的地位对齐
end与 完结的地位对齐
center居中对齐
spaceBetween把残余的空间拆分成n-1份(n是子控件的个数) 每一份都插入到子控件之间
spaceEvenly把残余的空间拆分成n+1份(n是子控件的个数) 而后均匀分布
spaceAround把残余空间拆分成 2n 份(n是子控件的个数) 每个子控件高低各放一份

WrapAlignment.start

WrapAlignment.center

WrapAlignment.end

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

WrapAlignment.spaceAround

runAlignment

runAlignment接管一个WrapAlignment类型的枚举，WrapAlignment共有六个枚举值（跟alignment的枚举值是一样的），runAlignment管制是的是Wrap布局穿插方向的对齐形式。
如果Wrap的是程度方向布局，runAlignment管制的就是Wrap垂直方向的对齐形式。

verticalDirection

verticalDirection有两个值VerticalDirection.down和VerticalDirection.up，示意从哪个方向开始布局。
VerticalDirection.down

VerticalDirection.up

留神 当设置为VerticalDirection.up的时候，第一个控件也就是Number 0是从最低端最左侧开始的。

spacing 和 runSpacing

spacing示意子控件主轴方向间距，runSpacing子控件在穿插方向间距。
在一个程度方向布局的Wrap为中，spacing示意的就是程度方向子控件之间的间距，runSpacing示意的就是子控件在垂直方向上的间距。

space
space等于10的样子

space等于40的样子

runSpacing
runSpacing等于10的样子

runSpacing等于40的样子

想体验以上示例的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->wrap_page.dart查看，并且能够下载下来运行并体验。