Flutter中列内自动容器尺寸适配：日历式概览布局实现方案

针对你需要的这种带顶部偏移、重叠时自动横向排列且宽度最大化的布局，最高效的实现方式是使用CustomMultiChildLayout——这是Flutter官方提供的专门处理多子组件自定义布局的组件，相比手动计算能更优雅地整合布局逻辑，且性能更优。

核心思路 #

通过自定义MultiChildLayoutDelegate，我们可以在单次布局流程中完成所有子组件的位置与尺寸计算：

• 先按子组件的顶部偏移对其分组，将重叠的组件归为同一组；
• 对每组计算宽度：可用布局宽度除以组内组件数量，确保宽度最大化；
• 为每个组件设置最终布局参数：横向偏移由组内索引乘以单组件宽度决定，纵向偏移用预设的顶部值，高度固定。

代码实现示例 #

1. 自定义布局代理

class CalendarEventLayoutDelegate extends MultiChildLayoutDelegate {
  final List<CalendarEvent> events;
  final double fixedHeight;

  CalendarEventLayoutDelegate({required this.events, required this.fixedHeight});

  @override
  void performLayout(Size size) {
    // 按顶部偏移分组，收集重叠的事件
    final groups = <List<CalendarEvent>>[];
    for (final event in events) {
      bool added = false;
      for (final group in groups) {
        // 检查当前事件是否与组内任意事件重叠
        if (event.topOffset < group.last.topOffset + fixedHeight &&
            event.topOffset + fixedHeight > group.first.topOffset) {
          group.add(event);
          added = true;
          break;
        }
      }
      if (!added) {
        groups.add([event]);
      }
    }

    // 遍历每组，计算并布局子组件
    for (final group in groups) {
      final itemWidth = size.width / group.length;
      for (int i = 0; i < group.length; i++) {
        final event = group[i];
        final childId = event.id;
        if (hasChild(childId)) {
          layoutChild(
            childId,
            BoxConstraints.tight(Size(itemWidth, fixedHeight)),
          );
          positionChild(
            childId,
            Offset(i * itemWidth, event.topOffset),
          );
        }
      }
    }
  }

  @override
  bool shouldRelayout(covariant CalendarEventLayoutDelegate oldDelegate) {
    return events != oldDelegate.events || fixedHeight != oldDelegate.fixedHeight;
  }
}

// 定义事件数据类
class CalendarEvent {
  final Object id;
  final double topOffset;

  CalendarEvent({required this.id, required this.topOffset});
}

2. 使用布局组件

class CalendarOverview extends StatelessWidget {
  final double eventHeight = 60;
  final List<CalendarEvent> events = [
    CalendarEvent(id: '1', topOffset: 0),
    CalendarEvent(id: '2', topOffset: 30),
    CalendarEvent(id: '3', topOffset: 70),
    CalendarEvent(id: '4', topOffset: 80),
  ];

  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: CalendarEventLayoutDelegate(
        events: events,
        fixedHeight: eventHeight,
      ),
      children: events.map((event) {
        return LayoutId(
          id: event.id,
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 2),
            decoration: BoxDecoration(
              color: Colors.blueAccent.withOpacity(0.7),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Center(child: Text('Event ${event.id}')),
          ),
        );
      }).toList(),
    );
  }
}

方案优势 #

• 性能更优：CustomMultiChildLayout将所有布局逻辑集中在一次流程中，避免手动计算时可能出现的多次布局重绘；
• 可维护性强：布局逻辑封装在代理类中，后续调整重叠规则、尺寸计算逻辑只需修改代理，无需改动组件结构；
• 适配灵活：可轻松扩展支持不同的重叠判断规则、间距调整等需求。

如果选择手动计算，需要在LayoutBuilder中手动遍历组件计算位置，不仅代码冗余，还容易因边界条件处理不当出现布局错误，因此优先推荐CustomMultiChildLayout方案。

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