Flutter布局求助：含可展开列表的Column卡片空间分配优化需求

要实现你描述的布局需求，核心思路是动态计算可用空间并根据卡片展开状态分配约束，结合LayoutBuilder、ConstrainedBox和SingleChildScrollView解决空间溢出与不合理分配的问题。

实现步骤与代码示例 #

1. 自定义可展开卡片组件

封装可复用的ExpandableCard，支持折叠/展开切换，并能接收动态高度约束：

import 'package:flutter/material.dart';

class ExpandableCard extends StatefulWidget {
  final String title;
  final List<Widget> items;
  final ValueChanged<bool>? onExpansionChanged;
  final double? maxContentHeight; // 展开时内容的最大高度限制

  const ExpandableCard({
    super.key,
    required this.title,
    required this.items,
    this.onExpansionChanged,
    this.maxContentHeight,
  });

  @override
  State<ExpandableCard> createState() => _ExpandableCardState();
}

class _ExpandableCardState extends State<ExpandableCard> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 标题触发区
          ListTile(
            title: Text(widget.title),
            trailing: Icon(
              _isExpanded ? Icons.expand_less : Icons.expand_more,
            ),
            onTap: () {
              setState(() => _isExpanded = !_isExpanded);
              widget.onExpansionChanged?.call(_isExpanded);
            },
          ),
          // 展开内容区
          if (_isExpanded)
            ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: widget.maxContentHeight ?? double.infinity,
              ),
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: widget.items,
                ),
              ),
            ),
        ],
      ),
    );
  }
}

2. 父布局：动态计算空间分配

使用LayoutBuilder获取父容器可用空间，根据展开卡片数量与折叠卡片高度，动态分配每个展开卡片的最大高度：

class DynamicExpandableCards extends StatefulWidget {
  const DynamicExpandableCards({super.key});

  @override
  State<DynamicExpandableCards> createState() => _DynamicExpandableCardsState();
}

class _DynamicExpandableCardsState extends State<DynamicExpandableCards> {
  // 记录4个卡片的展开状态
  final List<bool> _expandedStates = List.filled(4, false);
  // 获取折叠卡片的实际渲染高度
  final List<GlobalKey> _cardKeys = List.generate(4, (_) => GlobalKey());

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算所有折叠卡片的总高度（精确获取实际渲染值）
        double totalCollapsedHeight = 0;
        for (int i = 0; i < _cardKeys.length; i++) {
          final renderBox = _cardKeys[i].currentContext?.findRenderObject() as RenderBox?;
          if (renderBox != null && !_expandedStates[i]) {
            totalCollapsedHeight += renderBox.size.height;
          }
        }

        // 剩余可用空间 = 父容器总高度 - 所有折叠卡片高度
        final availableSpace = constraints.maxHeight - totalCollapsedHeight;
        // 统计展开的卡片数量
        final expandedCount = _expandedStates.where((state) => state).length;

        // 每个展开卡片的最大高度：剩余空间平均分配
        final maxHeightPerExpanded = expandedCount > 0 ? availableSpace / expandedCount : null;

        return Column(
          children: [
            _buildCard(
              index: 0,
              title: "卡片1",
              items: List.generate(3, (i) => Text("项目 ${i+1}")),
              maxHeight: maxHeightPerExpanded,
            ),
            _buildCard(
              index: 1,
              title: "卡片2",
              items: List.generate(10, (i) => Text("项目 ${i+1}")),
              maxHeight: maxHeightPerExpanded,
            ),
            _buildCard(
              index: 2,
              title: "卡片3",
              items: const [], // 空列表
              maxHeight: maxHeightPerExpanded,
            ),
            _buildCard(
              index: 3,
              title: "卡片4",
              items: List.generate(15, (i) => Text("项目 ${i+1}")),
              maxHeight: maxHeightPerExpanded,
            ),
          ],
        );
      },
    );
  }

  Widget _buildCard({
    required int index,
    required String title,
    required List<Widget> items,
    double? maxHeight,
  }) {
    return ExpandableCard(
      key: _cardKeys[index],
      title: title,
      items: items,
      maxContentHeight: maxHeight,
      onExpansionChanged: (expanded) {
        setState(() => _expandedStates[index] = expanded);
      },
    );
  }
}

核心逻辑说明 #

• 折叠状态：卡片通过mainAxisSize: MainAxisSize.min仅占用标题栏所需空间，无多余留白。
• 展开状态：
  • 内容较少的卡片：ConstrainedBox不限制最小高度，列表仅占用自身内容所需空间。
  • 内容较多的卡片：当内容超过分配的最大高度时，SingleChildScrollView自动触发滚动，避免溢出。
  • 全展开且内容都多：剩余空间被平均分配给4个展开卡片，每个占用1/4的可用空间。
• 精确高度计算：通过GlobalKey获取折叠卡片的实际渲染高度，替代固定值，适配不同主题与字体大小。

为什么之前的方法不适用 #

• IntrinsicHeight：强制子项使用固有高度，内容总和超过父容器时直接溢出。
• Expanded：强制按比例分配空间，即使卡片内容为空也会占用固定比例的空间。
• Flexible：仍会按比例分配剩余空间，无法实现"内容少则占空间少"的需求。

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