Flutter之Flow组件

/**
 * 一般用在流式布局中,比如标签,瀑布流等
    Flow({
    Key key,
    @required this.delegate,//绘制子view
    List children = const [],
    })
 */
body: Flow(
          delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
          children: [
            Container(width: 30.0, height: 40.0, color: Color(0xffff0000),),
            Container(width: 50.0, height: 40.0, color: Color(0xff00ff00),),
            Container(width: 70.0, height: 40.0, color: Color(0xff0000ff),),
            Container(width: 50.0, height: 40.0, color: Color(0xffffff00),),
            Container(width: 50.0, height: 40.0, color: Color(0xffff0000),),
            Container(width: 80.0, height: 40.0, color: Color(0xffff00ff),),
            Container(width: 50.0, height: 40.0, color: Color(0xffff0000),),
            Container(width: 50.0, height: 40.0, color: Color(0xff0000ff),),
          ],
        ),
class TestFlowDelegate extends FlowDelegate {

  EdgeInsets margin = EdgeInsets.zero;

  TestFlowDelegate({this.margin});

  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;

    for (var i = 0; i < context.childCount; i++) {
      var w = x + context
          .getChildSize(i)
          .width + margin.right;
      if (w < context.size.width) {
        context.paintChild(
            i, transform: new Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y = y + context
            .getChildSize(i)
            .height + margin.bottom;
        context.paintChild(
            i, transform: new Matrix4.translationValues(x, y, 0.0));
        x = x + context
            .getChildSize(i)
            .width + margin.right + margin.left;
      }
    }
  }

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

  //  是否需要重新布局。
  @override
  bool shouldRelayout(FlowDelegate oldDelegate) {
    return super.shouldRelayout(oldDelegate);
  }

  //设置Flow的尺寸
  @override
  Size getSize(BoxConstraints constraints) {
    return super.getSize(constraints);
  }

  //  设置每个child的布局约束条件
  @override
  BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
    return super.getConstraintsForChild(i, constraints);
  }
}

码云地址:https://gitee.com/xgljh/Flutter.git

你可能感兴趣的:(Flutter之Flow组件)