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

野性酷女 2023-07-22 03:51 1阅读 0赞

>  *  如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
>  *  同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
>  *  Flutter地址：[http://laomengit.com][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'),
            );
          }),
        )

效果如图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70][]

### 布局方向 ###

`direction`属性控制布局方向，默认为水平方向，设置方向为垂直代码如下：

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

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 1][]

### 对齐方式 ###

`alignment`属性控制主轴对齐方式，`crossAxisAlignment`属性控制交叉轴对齐方式，对齐方式只对有剩余空间的行或者列起作用，例如水平方向上正好填充完整，则不管设置主轴对齐方式为什么，看上去的效果都是铺满。

> 说明：主轴就是与当前控件方向一致的轴，而交叉轴就是与当前控件方向垂直的轴，如果Wrap的布局方向为水平方向`Axis.horizontal`,那么主轴就是水平方向，反之布局方向为垂直方向`Axis.vertical`，主轴就是垂直方向。

设置主轴对齐方式代码如下：

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

主轴对齐方式有6种，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 2][]

> 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'),
            );
          }),
        )

效果如下图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 3][]

`runAlignment`属性控制Wrap的主轴垂直方向每一行的对齐方式，语言描述大家可能云里雾绕的，下面直接看`runAlignment`6中方式对应的效果图，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 4][]

`runAlignment`和`alignment`的区别：

`alignment`是主轴方向上对齐方式，作用于每一行。  
`runAlignment`是垂直主轴方向上将每一行看作一个整体的对齐方式。

设置`runAlignment`属性代码如下：

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

`runAlignment`、`alignment`、`crossAxisAlignment`这3个属性如果只是从文字上描述是比较难描述清楚的，上面提供了效果图，方便大家理解，这3个属性是Wrap最重要的属性。

### 间隔 ###

`spacing`和`runSpacing` 属性控制Wrap主轴方向和交叉轴方向子控件之间的间隙，代码如下：

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

效果如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 5][]

### textDirection ###

`textDirection`属性表示Wrap主轴方向上子控件的方向，取值范围是`ltr`（从左到右）和`rtl`（从右到左），下面是从右到左的代码：

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

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 6][]

### verticalDirection ###

`verticalDirection`属性表示Wrap交叉轴方向上子控件的方向，取值范围是`up`（从上到下）和`down`（从下到上），设置代码如下：

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

效果如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 7][]

[http_laomengit.com]: http://laomengit.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70]: /images/20230528/ce355b7c3f5f4143b7400b30fd99392c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 1]: /images/20230528/c7710b293e3c478fa7d20e1af60468e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 2]: /images/20230528/5f545daa5468462789fabb87429bf844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 3]: /images/20230528/863c8360a92b48af9890d3b0cff2b530.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 4]: /images/20230528/551f50e4e4104c48afa6b41ccfd9c272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 5]: /images/20230528/dbdf0ba7a7784fa6a5f6acb410217aa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 6]: /images/20230528/d7a9bc90cf8543bfb208c5d650455ec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70 7]: /images/20230528/b5579772af9c49f09a2b7f8b8a54556b.png