美文网首页flutter
Flutter之Flow组件

Flutter之Flow组件

作者: 习惯了_就好 | 来源:发表于2019-01-03 15:51 被阅读16次
    /**
     * 一般用在流式布局中,比如标签,瀑布流等
        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);
      }
    }
    

    相关文章

      网友评论

        本文标题:Flutter之Flow组件

        本文链接:https://www.haomeiwen.com/subject/nbafrqtx.html