Flutter如何去除Column组件内部子widget之间的空隙？

问题原因 #

你观察到的间隙不是Column组件自带的，是第一个子项内的Card组件默认配置了外边距导致的，Flutter中Card的默认margin值为EdgeInsets.all(4.0)，这4像素的边距就是间隙的来源。

解决方案 #

• 直接给Card组件显式设置margin为0即可消除间隙，修改后的Card代码如下：

Card(
  margin: EdgeInsets.zero, // 添加这行配置
  // color: Colors.transparent,
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.white70, width: 1),
    borderRadius: BorderRadius.circular(20),
  ),
  // 其余原有代码保持不变
)

• 视觉适配补充：如果需要两个组件完全衔接无违和感，可调整圆角参数，将Card的底部圆角设为0，下方Container的顶部圆角设为20，避免衔接位置出现多余的圆角留白。

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