CustomMultiChildLayout无限高度报错原因及动态适配问询

核心错误原因 #

1. 未指定布局自身尺寸：你的WrapLayoutDelegate在performLayout方法中，没有调用setSize()来确定整个CustomMultiChildLayout的最终高度和宽度。父组件Column默认提供无限垂直空间，而CustomMultiChildLayout无法自身确定高度，直接触发约束冲突。
2. 缺失对应LayoutId的子组件：代码中调用了layoutChild('Title')和layoutChild('More')，但在CustomMultiChildLayout的children列表里没有这两个id对应的LayoutId组件，不仅会导致运行时错误，还会打乱布局计算逻辑。
3. Column的无约束垂直空间：Column在没有垂直约束（比如未被Expanded包裹、无固定高度）时，会给子组件无限高度的可用空间，而CustomMultiChildLayout如果不主动声明自身高度，就会陷入约束循环。

修复步骤 #

1. 清理无效的LayoutId引用 #

如果不需要'Title'和'More'组件，直接删除delegate中相关的layoutChild和positionChild代码，避免无意义的错误。

2. 手动设置布局尺寸 #

在performLayout方法末尾，根据子组件的排列计算出最终高度，调用setSize()告诉CustomMultiChildLayout自身的大小。

3. 给CustomMultiChildLayout添加水平约束 #

通过Expanded或Container(width: double.infinity)包裹，确保布局计算时有明确的宽度参考，避免宽度也出现无约束问题。

修改后的代码示例 #

修复后的WrapLayoutDelegate #

class WrapLayoutDelegate extends MultiChildLayoutDelegate {
  WrapLayoutDelegate(this.childCount, {this.horizontalSpacing = 8.0, this.verticalSpacing = 8.0});

  final int childCount;
  final double horizontalSpacing;
  final double verticalSpacing;

  static const int _maxRow = 2;

  @override
  void performLayout(Size size) {
    double totalWidth = 0;
    double rowHeight = 0;
    double maxRowHeight = 0;
    double currentRowNumber = 1;

    bool isOverload() => currentRowNumber > _maxRow;

    for (int i = 0; i < childCount; i++) {
      if (!hasChild(i)) continue;
      final Size childSize = layoutChild(i, BoxConstraints.loose(size));
      
      if (isOverload()) {
        positionChild(i, Offset(-childSize.width, -childSize.height));
        continue;
      }

      final double adjustedTotalWidth = totalWidth > 0 ? totalWidth + horizontalSpacing : totalWidth;
      final double newTotalWidth = adjustedTotalWidth + childSize.width;
      maxRowHeight = max(childSize.height, maxRowHeight);

      if (newTotalWidth > size.width) {
        currentRowNumber++;
        if (isOverload()) {
          positionChild(i, Offset(-childSize.width, -childSize.height));
          continue;
        }
        totalWidth = childSize.width;
        positionChild(i, Offset(0, rowHeight + verticalSpacing));
        rowHeight += maxRowHeight + verticalSpacing;
        maxRowHeight = childSize.height;
      } else {
        positionChild(i, Offset(adjustedTotalWidth, rowHeight));
        totalWidth = newTotalWidth;
      }
    }

    // 设置布局最终尺寸：宽度沿用父组件给定宽度，高度为计算出的总高度
    final double finalHeight = rowHeight + maxRowHeight;
    setSize(Size(size.width, finalHeight));
  }

  @override
  bool shouldRelayout(covariant WrapLayoutDelegate oldDelegate) {
    return oldDelegate.childCount != childCount ||
        oldDelegate.horizontalSpacing != horizontalSpacing ||
        oldDelegate.verticalSpacing != verticalSpacing;
  }
}

修复后的父组件布局 #

Padding(
  padding: const EdgeInsets.symmetric(vertical: 8.0),
  child: Column(
    children: <Widget>[
      // 用Expanded给CustomMultiChildLayout明确的水平约束，同时让它适配Column的垂直空间
      Expanded(
        child: CustomMultiChildLayout(
          delegate: WrapLayoutDelegate(widget.items.length),
          children: <Widget>[
            for (int i = 0; i < widget.items.length; i++)
              LayoutId(
                id: i,
                child: CustomChipButton(
                  title: widget.items[i].name,
                  colorHex: widget.items[i].icon.isNotEmpty ? widget.items[i].icon : null,
                  isSelected: widget.isSelected(widget.items[i]),
                  onTap: () => widget.onItemTap(widget.items[i]),
                ),
              ),
          ],
        ),
      ),
    ],
  ),
);

补充说明 #

CustomMultiChildLayout本身不会自动根据子组件调整尺寸，它的大小完全由你在delegate的performLayout中通过setSize()指定。这也是它的灵活性所在——你可以完全控制布局的尺寸和子组件的位置，但也需要手动完成尺寸计算。

内容的提问来源于stack exchange，提问作者inkwelll075