如何在Column中结合Expanded与固定高度Container，避免屏幕过小时溢出

针对你遇到的问题——当屏幕高度不足时红色Container自动缩减而非溢出，这里提供两种可行方案：

方案一：使用Flexible + ConstrainedBox #

这种方法通过Flexible让红色Container在空间不足时自动收缩，同时用ConstrainedBox限制其最大高度为100，确保屏幕足够时保持原设计：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('TestApp')),
    body: Column(
      children: [
        Flexible(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxHeight: 100),
            child: Container(color: Colors.red),
          ),
        ),
        Expanded(
          child: Container(color: Colors.blue),
        ),
      ],
    ),
  );
}

原理说明： #

• Flexible会让红色Container参与Column的空间分配，当可用空间不足时，它会根据flex比例（默认1）自动收缩，避免溢出。
• ConstrainedBox限制红色Container的最大高度为100，保证屏幕高度足够时，红色区域保持预期尺寸。
• Expanded会强制占据剩余所有空间，确保蓝色区域始终能获取到可用空间。

方案二：使用LayoutBuilder动态计算高度 #

如果你需要更精确控制红色Container的高度逻辑（比如固定蓝色区域最小高度），可以用LayoutBuilder获取父容器的可用空间，动态计算红色区域高度：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('TestApp')),
    body: LayoutBuilder(
      builder: (context, constraints) {
        // 可用高度为屏幕高度减去AppBar高度
        final availableHeight = constraints.maxHeight;
        // 红色高度：最大100，同时给蓝色区域留至少20的高度（可按需调整）
        final redHeight = availableHeight > 120 
            ? 100.0 
            : availableHeight - 20.0;
        // 确保红色高度不会为负数
        final safeRedHeight = max(redHeight, 0.0);
        
        return Column(
          children: [
            Container(
              height: safeRedHeight,
              color: Colors.red,
            ),
            Expanded(
              child: Container(color: Colors.blue),
            ),
          ],
        );
      },
    ),
  );
}

原理说明： #

• LayoutBuilder能获取到父容器（即Scaffold body）的可用空间约束，让我们可以根据实际屏幕高度动态计算子组件尺寸。
• 通过判断可用高度，我们可以灵活控制红色区域的高度上限，同时保证蓝色区域有最小显示空间。

为什么你之前的尝试无效？ #

• SingleChildScrollView会让Column拥有无限高度，Expanded需要基于有限的剩余空间才能工作，因此两者无法兼容。
• Wrap组件是按子组件尺寸自动换行，不适合这种需要比例分配空间的垂直布局场景。
• 单独使用ConstrainedBox设置maxHeight:100，只是限制了红色Container的最大高度，但没有让它在空间不足时自动收缩——Column默认会尝试让子组件按自身高度布局，当总高度超过可用空间时就会溢出。

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