Flutter complexCard组件布局异常：按钮无法正常显示于simpleCard下方

我的complexCard组件渲染异常，原本希望两个ElevatedButton显示在simpleCard下方，但Column布局出现问题。左侧是正常的simpleCard，右侧是异常的complexCard。

原代码 #

class PieceCardState extends State<PieceCard> {
  late Widget current;
  int flex = 1;

  Widget simpleCard() {
    return Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(24.0)),
      width: 10,
      height: 40,
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          Container(
            // Future will be an image
            decoration: BoxDecoration(
              border: Border.all(color: Colors.brown, width: 4),
              borderRadius: BorderRadius.circular(20.0),
              color: Colors.amber,
            ),
          ),
          Container(
            child: Text('Level',
                style: TextStyle(
                    color: Colors.brown,
                    fontSize: 36.0,
                    decoration: TextDecoration.none,
                    fontWeight: FontWeight.bold)),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.brown, width: 4),
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20.0),
                    bottomRight: Radius.circular(20.0)),
                color: Color.fromARGB(255, 255, 218, 107)),
          )
        ],
      ),
    );
  }

  Widget complexCard() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24),
        color: Colors.grey,
      ),
      width: 10,
      height: 60,
      child: Column(
        children: [
          simpleCard(),
          Padding(padding: EdgeInsets.symmetric(vertical: 30)),
          ElevatedButton(onPressed: () {}, child: Text('SWAP', style: TextStyle(fontSize: 24, color: Colors.white)), style: ButtonStyle(backgroundColor: MaterialStateColor.resolveWith((states) => Colors.orange))),
          ElevatedButton(onPressed: () {}, child: Text('INFO', style: TextStyle(fontSize: 24, color: Colors.white)), style: ButtonStyle(backgroundColor: MaterialStateColor.resolveWith((states) => Colors.orange)))
        ],
      )
    );
  }
  @override
  void initState() {
    current = simpleCard();
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          current = complexCard();
          flex = 2;
        });
      },
      child: current,
    );

  }
}

问题原因及修复方案 #

核心问题 #

1. 不合理的固定尺寸：simpleCard和complexCard都设置了极小的width:10，完全不足以承载文本和按钮内容；complexCard的height:60远小于内部元素总高度（simpleCard高度40 + 垂直内边距30 + 两个按钮高度），导致内容被严重挤压变形。
2. Column未适配内容：默认Column会尝试撑满父容器高度，且不会处理溢出内容，当子元素总高度超过容器时就会出现截断、重叠。

修复步骤 #

1. 移除不必要的固定width和height，让组件根据内容自适应，或设置合理的最小尺寸。
2. 用SizedBox替代Padding控制间距，更直观且避免过度留白。
3. 给Column设置mainAxisSize: MainAxisSize.min，让其仅占用内容所需高度。
4. 给容器添加内边距，避免内容贴边。

修复后代码示例 #

修改simpleCard

Widget simpleCard() {
  return Container(
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(24.0)),
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.brown, width: 4),
            borderRadius: BorderRadius.circular(20.0),
            color: Colors.amber,
          ),
          padding: EdgeInsets.only(top: 40),
        ),
        Container(
          child: Text('Level',
              style: TextStyle(
                  color: Colors.brown,
                  fontSize: 36.0,
                  decoration: TextDecoration.none,
                  fontWeight: FontWeight.bold)),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.brown, width: 4),
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20.0),
                  bottomRight: Radius.circular(20.0)),
              color: Color.fromARGB(255, 255, 218, 107)),
        )
      ],
    ),
  );
}

修改complexCard

Widget complexCard() {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(24),
      color: Colors.grey,
    ),
    padding: EdgeInsets.all(8),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        simpleCard(),
        SizedBox(height: 10),
        ElevatedButton(
          onPressed: () {},
          child: Text('SWAP', style: TextStyle(fontSize: 24, color: Colors.white)),
          style: ButtonStyle(backgroundColor: MaterialStateColor.resolveWith((states) => Colors.orange)),
        ),
        SizedBox(height: 8),
        ElevatedButton(
          onPressed: () {},
          child: Text('INFO', style: TextStyle(fontSize: 24, color: Colors.white)),
          style: ButtonStyle(backgroundColor: MaterialStateColor.resolveWith((states) => Colors.orange)),
        )
      ],
    ),
  );
}

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