微信交流群

老孟公众号

# 自定义布局组件

大部分情况下,不会使用到 Flow ,但 Flow 可以调整子组件的位置和大小,结合Matrix4绘制出各种酷炫的效果。

Flow 组件对使用转换矩阵操作子组件经过系统优化,性能非常高效。

基本用法如下:

Flow(
  delegate: SimpleFlowDelegate(),
  children: List.generate(5, (index) {
    return Container(
      height: 100,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }),
)
1
2
3
4
5
6
7
8
9

delegate 控制子组件的位置和大小,定义如下 :

class SimpleFlowDelegate extends FlowDelegate {
  
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; ++i) {
      context.paintChild(i);
    }
  }

  
  bool shouldRepaint(SimpleFlowDelegate oldDelegate) {
    return false;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

delegate 要继承 FlowDelegate,重写 paintChildrenshouldRepaint 函数,上面直接绘制子组件,效果如下:

只看到一种颜色并不是只绘制了这一个,而是叠加覆盖了,和 Stack 类似,下面让每一个组件有一定的偏移,SimpleFlowDelegate 修改如下:

class SimpleFlowDelegate extends FlowDelegate {
  
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; ++i) {
      context.paintChild(i,transform: Matrix4.translationValues(0,i*30.0,0));
    }
  }

  
  bool shouldRepaint(SimpleFlowDelegate oldDelegate) {
    return false;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

每一个子组件比上一个组件向下偏移30。