《Flutter 控件大全》第一零二：Wrap

• 如果你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流羣（微信：laomengit）。
• 同時也歡迎關注我的Flutter公衆號【老孟程序員】，公衆號首發Flutter的相關內容。
• Flutter地址：http://laomengit.com 裏面包含160多個組件的詳細用法。

Wrap可以爲子控件進行水平或者垂直方向佈局，且當空間用完時，Wrap會自動換行，也是常說的流式​佈局。

創建多個子控件做爲Wrap的子控件，代碼如下：

Wrap(
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        return Container(
          color: Colors.primaries[i],
          height: 50,
          width: w,
		  child: Text('$i'),
        );
      }),
    )

效果如圖：

佈局方向

direction屬性控制佈局方向，默認爲水平方向，設置方向爲垂直代碼如下：

Wrap(
	direction: Axis.vertical,
	...
)

效果如圖：

對齊方式

alignment屬性控制主軸對齊方式，crossAxisAlignment屬性控制交叉軸對齊方式，對齊方式只對有剩餘空間的行或者列起作用，例如水平方向上正好填充完整，則不管設置主軸對齊方式爲什麼，看上去的效果都是鋪滿。

說明：主軸就是與當前控件方向一致的軸，而交叉軸就是與當前控件方向垂直的軸，如果Wrap的佈局方向爲水平方向Axis.horizontal,那麼主軸就是水平方向，反之佈局方向爲垂直方向Axis.vertical，主軸就是垂直方向。

設置主軸對齊方式代碼如下：

Wrap(
	alignment: WrapAlignment.spaceBetween,
	...
)

主軸對齊方式有6種，效果如下圖：

spaceAround和spaceEvenly區別是：

• spaceAround：第一個子控件距開始位置和最後一個子控件距結尾位置是其他子控件間距的一半。
• spaceEvenly：所有間距一樣。

設置交叉軸對齊代碼如下：

Wrap(
	crossAxisAlignment: WrapCrossAlignment.center,
	...
)

如果Wrap的主軸方向爲水平方向，交叉軸方向則爲垂直方向，如果想要看到交叉軸對齊方式的效果需要設置子控件的高不一樣，代碼如下：

Wrap(
      spacing: 5,
      runSpacing: 3,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        double h = 50.0 + 5 * i;
        return Container(
          color: Colors.primaries[i],
          height: h,
          alignment: Alignment.center,
          width: w,
          child: Text('$i'),
        );
      }),
    )

效果如下圖：

runAlignment屬性控制Wrap的主軸垂直方向每一行的對齊方式，語言描述大家可能雲裏霧繞的，下面直接看runAlignment6中方式對應的效果圖，

runAlignment和alignment的區別：

alignment是主軸方向上對齊方式，作用於每一行。
runAlignment是垂直主軸方向上將每一行看作一個整體的對齊方式。

設置runAlignment屬性代碼如下：

Wrap(
	runAlignment: WrapAlignment.spaceEvenly,
	...
)

runAlignment、alignment、crossAxisAlignment這3個屬性如果只是從文字上描述是比較難描述清楚的，上面提供了效果圖，方便大家理解，這3個屬性是Wrap最重要的屬性。

間隔

spacing和runSpacing 屬性控制Wrap主軸方向和交叉軸方向子控件之間的間隙，代碼如下：

Wrap(
	spacing: 5,
    runSpacing: 2,
	...
)

效果如下：

textDirection

textDirection屬性表示Wrap主軸方向上子控件的方向，取值範圍是ltr（從左到右）和rtl（從右到左），下面是從右到左的代碼：

Wrap(
	textDirection: TextDirection.rtl,
	...
)

效果如下：

verticalDirection

verticalDirection屬性表示Wrap交叉軸方向上子控件的方向，取值範圍是up（從上到下）和down（從下到上），設置代碼如下：

Wrap(
	verticalDirection: VerticalDirection.up,
	...
)

效果如下：