Flutter高级玩法Flow位置怎么自定义

什么是Flutter中的Flow控件

Flow是Flutter中的一个普通Widget，用于布局和绘制子部件。Flow的作用是根据子部件在Flow中设定的位置，生成一个相对位置的布局来实现对子部件的自定义位置排列。使用Flow布局通常需要实现子部件的位置计算，自动适应宽高，流式排列等功能，相对于其他布局方式具有更大的自由度。

  Flow(
    children: [
      // 子部件
    ],
    delegate: MyFlowDelegate(), // 位置计算器
  )

如何自定义Flow中子部件的位置

Flow是一个可自定义子部件位置的布局，实现这种功能主要需要通过实现FlowDelegate的子类。FlowDelegate对象是一个抽象类，只要按照我们的需要实现其中的方法，就可以对Flow的位置进行自定义。

  class MyFlowDelegate extends FlowDelegate {
    // 决定Flow中子部件的位置
    @override
    void paintChildren(FlowPaintingContext context) {
      // 子部件的位置计算
    }

    // 决定Flow的大小
    @override
    Size getSize(BoxConstraints constraints) {
      // Flow的大小计算
    }

    // 是否重新布局
    @override
    bool shouldRepaint(covariant MyFlowDelegate oldDelegate) {
      // 是否需要重新布局的判断逻辑
    }
  }

如何实现Flow的自适应宽高和流式排列

Flow中的子部件的大小不是确定的，因此往往需要实现自适应宽高，以及支持流式排列的功能。实现自适应宽高的方式可以使用子部件自身的constraints进行计算，计算后利用context.paintChild进行绘制。实现流式排列的方式可以通过计算子部件的位置，在每次位置绘制完毕后计算出下一个部件的位置。

  class MyFlowDelegate extends FlowDelegate {
    // 部件宽度的Map
    final Map widths = {};

    // 决定Flow中子部件的位置
    @override
    void paintChildren(FlowPaintingContext context) {
      // 子部件的位置计算
      double x = 0, y = 0;
      for (int i = 0; i < context.childCount; i++) {
        double width = widths[i] ?? 0;
        double height = context.getChildSize(i).height;
        if (x + width > context.size.width) {
          x = 0;
          y += height;
        }
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += width;
      }
    }

    // 决定Flow的大小
    @override
    Size getSize(BoxConstraints constraints) {
      // Flow的大小计算
      double width = 0, height = 0, x = 0, y = 0;
      for (int i = 0; i < widths.length; i++) {
        double w = widths[i] ?? 0;
        double h = context.getChildSize(i).height;
        if (x + w > constraints.maxWidth) {
          width = constraints.maxWidth;
          height = y + h;
          x = 0;
          y = height;
        } else {
          x += w;
        }
      }
      return Size(width, height);
    }

    // 是否重新布局
    @override
    bool shouldRepaint(covariant MyFlowDelegate oldDelegate) {
      // 是否需要重新布局的判断逻辑
    }
  }

总结

Flutter中的Flow控件是实现子部件自定义位置排列的一个常用布局方式。实现Flow控件需要自定义FlowDelegate子类，根据子部件自身的constraints计算子部件大小，并通过计算子部件位置实现可自定义控件位置排列，以及支持自适应宽高和流式排列的功能。