注意：無特殊說明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

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,
	...
)

效果如下：

更多相關閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

如果這篇文章有幫助到您，希望您關注我的公眾號，謝謝。