Wrap

基础属性

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

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

alignment 排列方式

WX20200923-144145.pngWX20200923-144344.png
WX20200923-144458.pngWX20200923-144544.pngWX20200923-144626.pngWX20200923-144758.pngspacing 间距

runSpacing / Spacing 间距

WX20200923-145241.pngWX20200923-150900.png

textDirection Widget子对齐方向

WechatIMG132.pngWX20200923-151829.png

verticalDirection 垂直方向

WX20200923-152351.pngWX20200923-152432.png

Flow

  1. Flow(
  2. delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
  3. children: <Widget>[
  4. new Container(width: 100.0, height:80.0, color: Colors.red,),
  5. new Container(width: 150.0, height:80.0, color: Colors.green,),
  6. new Container(width: 100.0, height:80.0, color: Colors.blue,),
  7. new Container(width: 80.0, height:80.0, color: Colors.yellow,),
  8. new Container(width: 80.0, height:80.0, color: Colors.brown,),
  9. new Container(width: 80.0, height:80.0, color: Colors.purple,),
  10. ],
  11. ),
  12. class TestFlowDelegate extends FlowDelegate {
  13. EdgeInsets margin = EdgeInsets.zero;
  14. TestFlowDelegate({this.margin});
  15. @override
  16. void paintChildren(FlowPaintingContext context) {
  17. var x = margin.left;
  18. var y = margin.top;
  19. //计算每一个子widget的位置
  20. for (int i = 0; i < context.childCount; i++) {
  21. var w = context.getChildSize(i).width + x + margin.right;
  22. if (w < context.size.width) {
  23. context.paintChild(i,
  24. transform: new Matrix4.translationValues(
  25. x, y, 0.0));
  26. x = w + margin.left;
  27. } else {
  28. x = margin.left;
  29. y += context.getChildSize(i).height + margin.top + margin.bottom;
  30. //绘制子widget(有优化)
  31. context.paintChild(i,
  32. transform: new Matrix4.translationValues(
  33. x, y, 0.0));
  34. x += context.getChildSize(i).width + margin.left + margin.right;
  35. }
  36. }
  37. }
  38. @override
  39. getSize(BoxConstraints constraints){
  40. //指定Flow的大小
  41. return Size(double.infinity,200.0);
  42. }
  43. @override
  44. bool shouldRepaint(FlowDelegate oldDelegate) {
  45. return oldDelegate != this;
  46. }
  47. }

image.png