作者 | 弗拉德
來源 | 弗拉德（公眾號：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效果一樣，想了解的可以看之前的文章

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查看，並且可以下載下來運行並體驗。