Flutter中使用指定Container出现底部溢出，原因是什么？

原因分析 #

第一个Container固定了height:50，但内部嵌套的Column包含两个Row（每个Row里有文本和图标），这些子组件的实际总高度超过了50像素。当父容器的固定高度小于子组件所需的最小高度时，Flutter就会抛出底部溢出错误，溢出的14像素就是子组件超出父容器的部分。

解决办法 #

以下是几种可行的修复方式：

• 去掉固定高度（推荐）：删除第一个Container的height:50属性，让容器自适应子组件的实际高度，彻底避免内容挤压。
• 调整固定高度：如果必须保留固定高度，将height值调整到足够容纳内部内容的大小（比如设为60，具体数值可根据实际文本和图标尺寸微调）。
• 限制Column的主轴尺寸：给内部的Column添加mainAxisSize: MainAxisSize.min，让Column仅占用子组件所需的最小高度，再配合合适的固定高度使用。

示例代码（修复后） #

// 方案1：去掉固定高度
Container(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(" ${item.vchrName}"),
          Icon(IconlyLight.heart),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("\$ ${item.dblSellingPrice}"),
          Icon(IconlyLight.chat),
        ],
      ),
    ],
  ),
),
Container(
  height: 25,
  color: Colors.redAccent,
)

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