Flutter 完整开发实战详解自定义布局，微信小程序的事件处理

);

}

然后自定义 RenderCloudWidget 继承 RenderBox ，并混入 ContainerRenderObjectMixin 和 RenderBoxContainerDefaultsMixin 实现 RenderBox 自定义的简化。

class RenderCloudWidget extends RenderBox

with

ContainerRenderObjectMixin<RenderBox, RenderCloudParentData>,

RenderBoxContainerDefaultsMixin<RenderBox, RenderCloudParentData> {

RenderCloudWidget({

List children,

Overflow overflow = Overflow.visible,

double ratio,

}) : _ratio = ratio,

_overflow = overflow {

///添加所有 child

addAll(children);

}

如下代码所示，接下来主要看 RenderCloudWidget 中override performLayout 中的实现，这里我们只放关键代码：

• 1、我们首先拿到 ContainerRenderObjectMixin 链表中的 firstChild ，然后从头到位读取整个链表。

• 2、对于每个 child 首先通过 child.layout 设置他们的大小，然后记录下大小之后。

• 3、以容器控件的中心为起点，从内到外设置布局，这是设置的时候，需要通过记录的 Rect 判断是否会重复，每次布局都需要计算位置，直到当前 child 不在重复区域内。

• 4、得到最终布局内大小，然后设置整体居中。

///设置为我们的数据

@override

void setupParentData(RenderBox child) {

if (child.parentData is! RenderCloudParentData)

child.parentData = RenderCloudParentData();

}

@override

void performLayout() {

///默认不需要裁剪

_needClip = false;

///没有 childCount 不玩

if (childCount == 0) {

size = constraints.smallest;

return;

}

///初始化区域

var recordRect = Rect.zero;

var previousChildRect = Rect.zero;

RenderBox child = firstChild;

while (child != null) {

var cu