流式布局

流式布局在移动端是非常常见的，比如商品列表，瀑布流、标签页等等
Flutter 中提供了两种流式布局Wrap和Flow

Wrap

Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。

 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>[],   //要显示的子控件集合
  })

注意

image.png
image.png

alignment 不管设置什么属性都不能调整第一行的位置
包裹一个Container来看，当前Wrap没有占满全屏

image.png

return Container(
      color: Colors.red,
      width: double.infinity,
      child: Wrap(
        spacing: 10,
        runSpacing: 30,
        runAlignment: WrapAlignment.end,
        alignment: WrapAlignment.spaceAround,
        children: [
          MyButton("第一季"),
          MyButton("第二季"),
          MyButton("第一季长度不一样"),
          MyButton("第三季"),
          MyButton("第四季"),
          MyButton("第五季"),
          MyButton("第六季"),
          MyButton("第六季"),
          MyButton("第六季"),
          MyButton("第六季"),
          MyButton("第六季"),
          MyButton("第六季"),
        ],
      ),

把Container占满全屏才表现下面效果

image.png

Flow

我们一般很少会使用Flow，因为其过于复杂，需要自己实现子组件的位置转换，所以在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高（如动画中）的场景。

Flow({
    Key key,
    @required this.delegate,
    List<Widget> children = const <Widget>[],
  }) 

class MyFlowDelegate extends FlowDelegate {

  @override
  void paintChildren(FlowPaintingContext context) {
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
    
    }

  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }

  @override
  getSize(BoxConstraints constraints){
    //指定Flow的大小
    return Size(double.infinity,200.0);
  }

}