Flutter中在RenderObject的performLayout函数中动态创建Widget的最小实现方案问询

兄弟，我完全懂你这种卡在RenderObject层的痛苦——平时都是在Widget层写UI，突然要深入到布局阶段动态创建节点，确实找不到简洁的例子。刚好我之前研究过类似的需求，给你一个最精简的实现，完全聚焦在你要的「布局时动态创建子Widget」这个核心点上，没有多余的滚动、溢出调试这些功能。

首先得明确一个关键：在RenderObject的布局阶段，我们不是直接创建Widget，而是创建对应的RenderBox（因为布局相关的RenderObject都是RenderBox的子类），然后通过Flutter提供的adoptChild和dropChild来管理这些子节点的生命周期——这两个就是你要找的API！

下面是完整的最小实现，分三个部分：

1. 定义CustomLazyColumn的Widget类 #

这个类是给上层使用的入口，我们初始时不传任何子Widget，因为子节点要在布局阶段动态生成：

class CustomLazyColumn extends MultiChildRenderObjectWidget {
  final IndexedWidgetBuilder itemBuilder;
  final int itemCount;

  CustomLazyColumn({
    super.key,
    required this.itemBuilder,
    required this.itemCount,
  }) : super(children: []); // 初始子节点为空，后续动态添加

  @override
  RenderCustomLazyColumn createRenderObject(BuildContext context) {
    return RenderCustomLazyColumn(
      itemBuilder: itemBuilder,
      itemCount: itemCount,
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderCustomLazyColumn renderObject) {
    renderObject
      ..itemBuilder = itemBuilder
      ..itemCount = itemCount;
  }
}

2. 核心的RenderObject实现 #

这部分是重点，我们自己维护子节点列表，在performLayout里根据可用空间动态创建并布局子节点：

class RenderCustomLazyColumn extends RenderBox with ContainerRenderObjectMixin<RenderBox, BoxConstraints> {
  IndexedWidgetBuilder _itemBuilder;
  int _itemCount;
  final List<RenderBox> _children = []; // 维护当前存在的子节点

  RenderCustomLazyColumn({
    required IndexedWidgetBuilder itemBuilder,
    required int itemCount,
  }) : _itemBuilder = itemBuilder, _itemCount = itemCount;

  // 提供setter，当外部参数变化时标记需要重新布局
  set itemBuilder(IndexedWidgetBuilder value) {
    if (_itemBuilder != value) {
      _itemBuilder = value;
      markNeedsLayout();
    }
  }

  set itemCount(int value) {
    if (_itemCount != value) {
      _itemCount = value;
      markNeedsLayout();
    }
  }

  @override
  void performLayout() {
    final availableHeight = constraints.maxHeight;
    double currentY = 0.0;
    int currentIndex = _children.length;

    // 第一步：布局已有的子节点，更新它们的位置
    for (int i = 0; i < _children.length; i++) {
      final child = _children[i];
      // 给子节点设置约束，这里允许子节点占满宽度，高度自适应
      child.layout(constraints.copyWith(maxHeight: double.infinity), parentUsesSize: true);
      child.position = Offset(0, currentY);
      currentY += child.size.height;
      // 如果已有的子节点已经占满空间，就停止布局已有节点
      if (currentY > availableHeight) break;
    }

    // 第二步：如果还有剩余空间，并且还有未创建的子节点，就动态创建并布局
    while (currentY < availableHeight && currentIndex < _itemCount) {
      // 用传入的itemBuilder创建Widget
      final widget = _itemBuilder(null, currentIndex)!;
      // 生成对应的RenderObject（必须是RenderBox类型）
      final childRenderObject = widget.createRenderObject(null);
      if (childRenderObject is RenderBox) {
        // 关键：告诉渲染树这个子节点现在由我们管理
        adoptChild(childRenderObject);
        _children.add(childRenderObject);
        // 布局新子节点
        childRenderObject.layout(constraints.copyWith(maxHeight: double.infinity), parentUsesSize: true);
        childRenderObject.position = Offset(0, currentY);
        currentY += childRenderObject.size.height;
        currentIndex++;
      }
    }

    // 第三步：如果子节点数量超过设定的itemCount，移除多余的并销毁
    while (_children.length > _itemCount) {
      final lastChild = _children.removeLast();
      // 关键：告诉渲染树我们不再管理这个子节点，它会被正确回收
      dropChild(lastChild);
    }

    // 设置自身的大小：宽度占满约束，高度取已布局的总高度或可用高度（取较小值）
    size = Size(constraints.maxWidth, currentY > availableHeight ? availableHeight : currentY);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // 只绘制可见的子节点（简单优化，避免绘制不可见的节点）
    for (final child in _children) {
      final childTop = child.position.dy;
      final childBottom = childTop + child.size.height;
      if (childBottom > offset.dy && childTop < offset.dy + size.height) {
        context.paintChild(child, offset + child.position);
      }
    }
  }

  @override
  void visitChildren(RenderObjectVisitor visitor) {
    // 遍历子节点，用于Flutter的渲染树遍历（比如调试、命中测试等）
    for (final child in _children) {
      visitor(child);
    }
  }
}

3. 使用示例 #

和ListView的用法几乎一样，传入itemCount和itemBuilder即可：

CustomLazyColumn(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Container(
      height: 50,
      color: index % 2 == 0 ? Colors.grey[200] : Colors.white,
      child: Center(child: Text('Item $index')),
    );
  },
)

关键细节说明 #

• adoptChild：必须在将子节点加入自己的列表前调用，它会把这个子节点注册到当前RenderObject的管理下，确保Flutter的渲染树能正确追踪它的生命周期。
• dropChild：当不再需要某个子节点时调用，它会解除当前RenderObject对子节点的管理，子节点会被正确销毁。
• 这个实现完全聚焦在「布局时动态创建子节点」，没有处理滚动、子节点复用（ListView的回收池）这些复杂逻辑，完全符合你现在的需求。

备注：内容来源于stack exchange，提问作者Fabrizio