Flutter开发中如何移除两个Container之间的多余线条

问题表现 #

Column排布子组件时，相邻两个Container之间出现非预期的多余细线，效果参考：

问题对应实现代码：

Column(
  children: [
    Container(
      height: 30,
      color: Colors.white,
    ),
    // 原代码存在笔误：Flutter无Containers组件，应为Container
    Container(
      height: 45,
      color: Colors.orange,
      child: Container(
        height: AppTheme.space3,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(AppTheme.space4),
            bottomRight: Radius.circular(AppTheme.space4),
          ),
          color: Colors.white,
        ),
      ),
    )
]);

产生原因 #

这类细线是Flutter抗锯齿渲染的精度问题导致的：同色但独立渲染的两个组件拼接、且其中一侧存在圆角时，边界像素的透明度计算会产生肉眼可见的细缝隙，并非代码主动添加的分隔组件。

修复方案 #

任选一种即可解决：

• 方案1：合并同色渲染层，从根源避免缝隙。给Column外层加统一的白色背景容器，原本第一个白色Container替换为无背景的SizedBox占位，消除两个独立白色组件的拼接边界。
  参考实现：

  Container(
    color: Colors.white, // 统一设置白色背景，避免分层渲染缝隙
    child: Column(
      children: [
        const SizedBox(height: 30), // 纯高度占位，不单独设置背景
        Container(
          height: 45,
          color: Colors.orange,
          child: Container(
            height: AppTheme.space3,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(AppTheme.space4),
                bottomRight: Radius.circular(AppTheme.space4),
              ),
              color: Colors.white,
            ),
          ),
        )
      ],
    ),
  )
  

• 方案2：给带圆角的Container设置裁剪属性clipBehavior: Clip.antiAlias，强制渲染时对齐像素边界，抵消抗锯齿产生的缝隙。
• 方案3：临时快速修复：在两个相邻Container之间插入一个高度1像素、颜色为白色的Container，直接覆盖渲染产生的缝隙。

修复前先修正代码笔误：将第二个子组件的Containers改为Container，否则会直接编译报错。

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