如何消除Flutter Column中两个Container之间的可见边框？

这种缝隙通常是网页端渲染时的像素精度问题（比如百分比高度导致的小数像素抗锯齿），或者元素宽度未对齐引发的视觉偏差，给你几个实用的解决办法：

方法1：合并同色Container（推荐） #

既然两个Container颜色完全一致，没必要分开，直接用一个Container包裹内部元素，从根源上避免缝隙：

class DesktopScreen extends StatelessWidget {
  const DesktopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return Scaffold(
          body: Container(
            color: HexColor("#111340"),
            height: 100.h,
            child: Column(
              children: [
                // 原顶部Row组件
                Row(children: [],),
                // 占满剩余高度
                const Spacer(),
              ],
            ),
          ),
        );
      },
    );
  }
}

方法2：强制元素对齐（必须分开Container时用） #

如果一定要保留两个Container，通过以下方式消除渲染偏差：

• 在Column中添加crossAxisAlignment: CrossAxisAlignment.stretch，让子元素撑满宽度，避免边缘对齐错位
• 用MediaQuery获取精确屏幕高度代替百分比（比如MediaQuery.of(context).size.height * 0.05替代5.h），减少小数像素带来的抗锯齿问题
• 给两个Container添加clipBehavior: Clip.hardEdge，强制渲染时忽略细微的像素偏差

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