1.概要

我们使用Row和Column的时候，如果子Widget不多的时候，是可以正常显示的：

image.png

但是，当Widget过多时，会导致子Widget超出屏幕，而报错：

image.png
此时，我们可以使用Wrap，Wrap能够自动帮我们排列布局子Widget，当过多时，会自动换行，而不会超过屏幕报错。
image.png

我们还可以设置Wrap排列的方向。

image.png

2.源码

Wrap({
    Key key,
    // 设置wrap排列方向，默认水平
    this.direction = Axis.horizontal,
    // 设置wrap主方向上布局方式，默认从开始位置布局
    this.alignment = WrapAlignment.start,
    // 主排列方向上的间距
    this.spacing = 0.0,
    // 设置横穿方向上子Widget的周围空间排布方式
    this.runAlignment = WrapAlignment.start,
    // 横穿方向上间距
    this.runSpacing = 0.0,
    // 横穿方向上布局方式，默认从开始位置布局
    this.crossAxisAlignment = WrapCrossAlignment.start,
    // 水平方向文字排列方向
    this.textDirection,
    // 垂直方向文字排列方向
    this.verticalDirection = VerticalDirection.down,
    // 裁剪子widget的方式
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })

3.示例

Wrap(
            spacing: 10,
            runSpacing: 10,
            children: List.generate(20, (index) => SizedBox(
                height: 100,
                width: 100,
                child: Container(color: Colors.red,)
            )),
          )

image.png