作者 | 弗拉德
來(lái)源 | 弗拉德（公眾號(hào)：fulade_me)
Wrap
在Flutter中Wrap是流式布局控件，Row和Column在布局上是很好用，但是有一個(gè)缺點(diǎn)，如果當(dāng)子控件數(shù)量過(guò)多導(dǎo)致Row或Column裝載不下的時(shí)候，就會(huì)出現(xiàn)UI頁(yè)面上的錯(cuò)誤。Wrap可以完美的避免這個(gè)問(wèn)題，當(dāng)控件過(guò)多一行顯示不全的時(shí)候，Wrap可以換行顯示。
當(dāng)然Wrap跟Row和Column有著很多相似的地方。
我們先來(lái)看Wrap的構(gòu)造函數(shù)：
Wrap({
// Key
Key key,
// 子控件顯示方向， 有垂直方向 水平方向兩個(gè)值
this.direction = Axis.horizontal,
/// 子控件的 布局方式 跟Column的 mainAxisalignment類(lèi)似
this.alignment = WrapAlignment.start,
/// 子控件 主軸方向間距
this.spacing = 0.0,
/// 子控件 交叉方向的 布局方式
this.runAlignment = WrapAlignment.start,
/// 子控件 交叉方向間距
this.runSpacing = 0.0,
/// 交叉軸的對(duì)齊方式 與 Column 的crossAxisAlignment 一樣
this.crossAxisAlignment = WrapCrossAlignment.start,
/// 書(shū)寫(xiě)方向 與 Column的 textDirection 一樣
this.textDirection,
/// Wrap交叉軸方向上子控件的布局方向
this.verticalDirection = VerticalDirection.down,
/// 裁剪方式
this.clipBehavior = Clip.hardEdge,
/// 子控件
List<Widget> children = const <Widget>[],
})
下面我們就來(lái)看看這些參數(shù)
direction
direction有兩個(gè)參數(shù)值Axis.horizontal和Axis.vertical，很明顯它管理著Wrap的是水平布局還是垂直布局。
Axis.horizontal表示子控件按水平方向布局，Axis.vertical表示子控件按垂直方向布局顯示。
Axis.horizontal
效果如下：
Axis.vertical
效果如下：
alignment
alignment接收一個(gè)WrapAlignment類(lèi)型的枚舉，WrapAlignment共有六個(gè)枚舉值，如下：
WrapAlignment的枚舉值與效果與Column的mainAxisAlignment效果一樣，想了解的可以看之前的文章
| 枚舉值 | 描述 |
|---|---|
| start | 與 開(kāi)始的位置對(duì)齊 |
| end | 與 結(jié)束的位置對(duì)齊 |
| center | 居中對(duì)齊 |
| spaceBetween | 把剩余的空間拆分成n-1份(n是子控件的個(gè)數(shù)) 每一份都插入到子控件之間 |
| spaceEvenly | 把剩余的空間拆分成n+1份(n是子控件的個(gè)數(shù)) 然后均勻分布 |
| spaceAround | 把剩余空間拆分成 2n 份(n是子控件的個(gè)數(shù)) 每個(gè)子控件上下各放一份 |
WrapAlignment.start
WrapAlignment.center
WrapAlignment.end
WrapAlignment.spaceBetween
WrapAlignment.spaceEvenly
WrapAlignment.spaceAround
runAlignment
runAlignment接收一個(gè)WrapAlignment類(lèi)型的枚舉，WrapAlignment共有六個(gè)枚舉值（跟alignment的枚舉值是一樣的），runAlignment控制是的是Wrap布局交叉方向的對(duì)齊方式。
如果Wrap的是水平方向布局，runAlignment控制的就是Wrap垂直方向的對(duì)齊方式。
verticalDirection
verticalDirection有兩個(gè)值VerticalDirection.down和VerticalDirection.up，表示從哪個(gè)方向開(kāi)始布局。
VerticalDirection.down
VerticalDirection.up
注意 當(dāng)設(shè)置為
VerticalDirection.up的時(shí)候，第一個(gè)控件也就是Number 0是從最低端最左側(cè)開(kāi)始的。
spacing 和 runSpacing
spacing表示子控件主軸方向間距，runSpacing子控件在交叉方向間距。
在一個(gè)水平方向布局的Wrap為中，spacing表示的就是水平方向子控件之間的間距，runSpacing表示的就是子控件在垂直方向上的間距。
space
space等于10的樣子
space等于40的樣子
runSpacing
runSpacing等于10的樣子
runSpacing等于40的樣子
想體驗(yàn)以上示例的運(yùn)行效果，可以到我的Github倉(cāng)庫(kù)項(xiàng)目flutter_app->lib->routes->wrap_page.dart查看，并且可以下載下來(lái)運(yùn)行并體驗(yàn)。
