Flutter布局问题：如何让右侧Box垂直覆盖Column全部区域

要让右侧的Box垂直覆盖整个Column的区域，你需要调整布局结构，用Row拆分左右区域，而非用Column嵌套Row。具体修改如下：

修改后的代码 #

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 强制子组件垂直拉伸填满Row高度
  children: [
    // 左侧区域：保留原有的两个smallBox和间距
    Expanded( // 用Expanded让左侧区域占满剩余水平空间
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              smallBox(),
              smallBox(),
            ],
          ),
          SizedBox(height: 20.h),
        ],
      ),
    ),
    // 右侧区域：单个smallBox，自动垂直铺满整个Row高度
    smallBox(),
  ],
)

关键调整点 #

• 外层用Row替代Column，实现左右分栏布局
• 给Row添加crossAxisAlignment: CrossAxisAlignment.stretch，让子组件在垂直方向填满Row的高度
• 左侧Column用Expanded包裹，确保它占满Row的剩余水平空间，避免右侧Box挤压左侧布局

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