3、 Flutter Widgets 之 Wrap

Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式布局。

构造方法：

  Wrap({
    Key key,
    this.direction = Axis.horizontal,   //排列方向，默认水平方向排列
    this.alignment = WrapAlignment.start,  //子控件在主轴上的对齐方式
    this.spacing = 0.0,  //主轴上子控件中间的间距
    this.runAlignment = WrapAlignment.start,  //子控件在交叉轴上的对齐方式
    this.runSpacing = 0.0,  //交叉轴上子控件之间的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,   //交叉轴上子控件的对齐方式
    this.textDirection,   //textDirection水平方向上子控件的起始位置
    this.verticalDirection = VerticalDirection.down,  //垂直方向上子控件的其实位置
    List<Widget> children = const <Widget>[],   //要显示的子控件集合
  })

创建多个子控件做为Wrap的子控件，代码如下：

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

布局方向

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

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

对齐方式

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的主轴垂直方向每一行的对齐方式，语言描述大家可能云里雾绕的，下面直接看runAlignment 6种方式对应的效果图， 

间隔

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