flutter响应式布局组件wrap

这个组件常用在响应式布局上，使用灵活多变。可设置属性较多

final Axis direction;
final WrapAlignment alignment;
final double spacing;
final WrapAlignment runAlignment;
final double runSpacing;
final WrapCrossAlignment crossAxisAlignment;
final TextDirection textDirection;
final VerticalDirection verticalDirection;

基础用法的是：

Container(
  child: Wrap(
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      )
    ],
  ),
)

效果是：

11_base.jpg

direction属性默认是Axis.horizontal， 可以设置的只有Axis.horizontal和Axis.vertical这两个值，如下就是更改默认值之后的效果：

Container(
  child: Wrap(
    direction: Axis.vertical, // 设置direction为Axis.vertical
    children: <Widget>[
      Container(
        width: 100,
        height: 200,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 40,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 400,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      )
    ],
  ),
)

效果是：

11_direction.jpg

alignment属性的值是WrapAlignment类型的，分别是start, end, center, spaceBetween, spaceAround和spaceEvenly 六个值。这里就展示设置spaceBetween的值情况，代码如下：

Container(
  child: Wrap(
    alignment: WrapAlignment.spaceBetween, //设置alignment的值
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.orange
      )
    ],
  ),
)

效果图：

11_alignment.jpg

runAlignment这个属性是和alignment相对的，值的类型是一样的，设置的就是direction属性的垂直方向各子元素的排列原则，代码如下：

Container(
  width: 375,
  height: 300,
  color: Colors.black12,
  child: Wrap(
    runAlignment: WrapAlignment.spaceBetween,
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      ),
        Container(
        width: 100,
        height: 50,
        color: Colors.orange
      )
    ],
  ),
)

效果图：

11_runAlignment.jpg

spacing属性的值是double类型，这个比较简单，就是子元素排列方向上各元素之间的间隙最小值。

示例代码如下：

Container(
  child: Wrap(
    spacing: 20,
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.orange
      )
    ],
  ),
)

效果图：

11_space.jpg

runSpacing这个值其实是和spacing是相对的，它设置的是子元素排列方向的垂直方向各子元素的间隙最小值。即如果子元素是按照垂直排列的，这个属性的值就是水平方向各子元素的间隙最小值。代码和效果图就不赘述了。

crossAxisAlignment这个属性也是很好理解的，即子元素在排列方向的垂直方向的位置展示，对比一下代码和效果图就一下能明白了。

Container(
  child: Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      ),
        Container(
        width: 100,
        height: 50,
        color: Colors.orange
      )
    ],
  ),
)

效果图如下：

11_crossAxisAlignment.jpg

verticalDirection这个属性的值是VerticalDirection类型，只有两个值，up 和down。默认是down, 就是垂直向下排列。如果是设置成up，就是垂直方向，从下往上排列。代码如下：

Container(
  child: Wrap(
    verticalDirection: VerticalDirection.up,
    children: <Widget>[
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
        Container(
        width: 100,
        height: 100,
        color: Colors.yellow
      ),
        Container(
        width: 100,
        height: 50,
        color: Colors.orange
      )
    ],
  ),
)

效果图如下：

11_verticalDirection.jpg

TextDirection 这个就是设置文字方向的，这里就不赘述了。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。