2-1-4.基础组件【Wrap/Flow】流式布局

Wrap

基础属性

 Wrap(
   direction : Axis.vertical, // 垂直或水平排列。
   alignment: WrapAlignment.start, // 对齐方式
   runSpacing: 10, // 间距 vertical则 垂直
   spacing: 10 , // 间距，按照 水平或者垂直来分
   textDirection: TextDirection.ltr, //Widget 子对齐方向
   verticalDirection: VerticalDirection.up, // 垂直方向 
   crossAxisAlignment: WrapCrossAlignment.start, // 横轴
   children: Dadalist,
 )

Wrap 为子组件进行水平或者垂直方向布局，且当空间用完时，Wrap 会自动换行，也就是流式布局。

alignment 排列方式

spacing 间距

runSpacing / Spacing 间距

textDirection Widget子对齐方向

verticalDirection 垂直方向

Flow

 Flow(
  delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
  children: <Widget>[
    new Container(width: 100.0, height:80.0, color: Colors.red,),
    new Container(width: 150.0, height:80.0, color: Colors.green,),
    new Container(width: 100.0, height:80.0, color: Colors.blue,),
    new Container(width: 80.0, height:80.0,  color: Colors.yellow,),
    new Container(width: 80.0, height:80.0, color: Colors.brown,),
    new Container(width: 80.0, height:80.0,  color: Colors.purple,),
  ],
),
class TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin = EdgeInsets.zero;
  TestFlowDelegate({this.margin});
  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;
    //计算每一个子widget的位置  
    for (int i = 0; i < context.childCount; i++) {
      var w = context.getChildSize(i).width + x + 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 += context.getChildSize(i).height + margin.top + margin.bottom;
        //绘制子widget(有优化)  
        context.paintChild(i,
            transform: new Matrix4.translationValues(
                x, y, 0.0));
         x += context.getChildSize(i).width + margin.left + margin.right;
      }
    }
  }
  @override
  getSize(BoxConstraints constraints){
    //指定Flow的大小  
    return Size(double.infinity,200.0);
  }
  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}