Flutter之Flow組件

/**
 * 一般用在流式布局中,比如標簽,瀑布流等
    Flow({
    Key key,
    @required this.delegate,//繪制子view
    List<Widget> children = const <Widget>[],
    })
 */
body: Flow(
          delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
          children: <Widget>[
            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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容