定制化布局样式：深入掌握CustomMultiChildLayout

# 1. 介绍CustomMultiChildLayout

## 2. 实现CustomMultiChildLayout

CustomMultiChildLayout是一个可以自定义子节点布局的组件，它可以根据开发者的需求，灵活地定制子节点的位置和大小。在本章中，我们将介绍如何实现CustomMultiChildLayout。

### 2.1 创建CustomMultiChildLayout

要创建一个CustomMultiChildLayout，我们首先需要定义一个继承自MultiChildRenderObjectWidget的类，并重写其createRenderObject方法：

import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class CustomLayout extends MultiChildRenderObjectWidget {
  CustomLayout({
    Key key,
    List<Widget> children = const [],
  }) : super(
          key: key,
          children: children,
        );

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCustomLayout();
  }
}

### 2.2 自定义布局参数

为了实现对子节点布局的定制，我们需要为CustomLayout定义一些自定义布局参数。在本例中，我们定义了一个CustomLayoutParentData类来存储子节点的位置和大小信息：

class CustomLayoutParentData extends ContainerBoxParentData<RenderBox> {
  // 自定义布局参数
  bool isPositioned = false; // 是否自定义位置
  double top; // 顶部偏移量
  double left; // 左侧偏移量
  double right; // 右侧偏移量
  double bottom; // 底部偏移量
}

### 2.3 子节点管理

创建CustomLayoutParentData后，我们需要将其赋值给子节点，这样就可以为每个子节点指定自定义布局参数。在CustomLayout中，我们通过重写updateRenderObject方法来完成这个操作：

@override
void updateRenderObject(BuildContext context, RenderCustomLayout renderObject) {
  // 绑定自定义布局参数
  renderObject.isPositionedMap.clear();
  renderObject.isPositionedMap.addEntries(
    children.map(
      (child) {
        final parentData = child.renderObject.parentData as CustomLayoutParentData;
        return MapEntry(child, parentData.isPositioned);
      },
    ),
  );
}

### 2.4 重写performLayout方法

最后，我们需要重写CustomLayout的performLayout方法来完成子节点的布局。在这个例子中，我们将子节点排列在CustomLayout的中心位置：

class RenderCustomLayout extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, CustomLayoutParentData>,
        RenderBoxContainerDefaultsMixin<RenderBox, CustomLayoutParentData> {
  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;
    final double width = constraints.maxWidth;
    final double height = constraints.maxHeight;

    for (final child in getChildrenAsList()) {
      final CustomLayoutParentData childParentData = child.parentData as CustomLayoutParentData;
      if (childParentData.isPositioned) {
        // 如果是自定义布局，设置子节点的位置和大小
        child.layout(constraints, parentUsesSize: true);
        childParentData.offset = Offset(
          (width - child.size.width) / 2 + childParentData.left - childParentData.right,
          (height - child.size.height) / 2 + childParentData.top - childParentData.bottom,
        );
      } else {
        // 默认布局居中
        child.layout(BoxConstraints(
          minHeight: 0,
          minWidth: 0,
          maxWidth: width,
          maxHeight: height,
        ));
        childParentData.offset = Offset(
          (width - child.size.widt