Flutter Flow

Flow可以自定义流式布局

一、类似Wrap，可以控制行数

image.png

/// 自定义Flow布局 类似Wrap 可以控制最大行数
class CustomWrapDelegate extends FlowDelegate {
  final double lineSpacing; // 行间距
  final double columnSpacing; // 列间距
  final int maxRow; // 最大行数

  CustomWrapDelegate(
      {this.lineSpacing = 0, this.columnSpacing = 0, this.maxRow = 0}); // 最大行

  @override
  void paintChildren(FlowPaintingContext context) {
    double x = 0;
    double y = 0;
    int row = 0;
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
      var w = x + context.getChildSize(i).width;
      if (w <= context.size.width) {
        context.paintChild(
          i,
          transform: Matrix4.translationValues(x, y, 0.0),
        );
        x = w + columnSpacing;
      } else {
        row += 1;
        if (maxRow != 0 && row >= maxRow) {
          return;
        }
        x = 0;
        y += context.getChildSize(i).height + lineSpacing;
        //绘制子widget(有优化)
        context.paintChild(
          i,
          transform: Matrix4.translationValues(x, y, 0.0), //位移
        );
        x = context.getChildSize(i).width + columnSpacing;
      }
    }
  }

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

问题：

1. 当Flow放入Container容器中可能会导致context.getChildSize获取失败，设置Container的alignment可以解决此问题
2. 如图所示，Flow中的标签结构为Container->Center->Text，但是使用了Center之后，会导致元素充满Flow，解决方法：
   1️⃣：不使用Center，通过Padding控制内部元素偏移
   2️⃣：在Container外面包一层UnconstrainedBox