如何解决Flutter中Card组件滚动时周围出现白色闪烁框的问题

故障原因 #

该闪烁是Flutter渲染抗锯齿精度不足导致的边距溢出问题：你的Card组件设置了白色背景，子级Container使用深蓝色顶部圆角，滚动时两个组件的边缘因像素对齐误差会漏出底层白色，就会出现白色闪烁边框。你当前代码中的Card没有用到阴影、圆角等特性，属于冗余嵌套，进一步放大了渲染误差。

修复方案 #

方案1：移除冗余Card组件（最优） #

直接用Container实现顶部圆角效果，减少嵌套层级从根源避免渲染误差，代码示例如下：

body: ListView(
  children: <Widget>[
    Container(
      height: 120,
      color: Colors.white
    ),
    Container(
      height: 20,
      decoration: BoxDecoration(
        color: Color(0xFF1F305E),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        // 可选配置：加极细同色边框完全抵消抗锯齿误差
        border: Border.all(color: Color(0xFF1F305E), width: 0.3),
      ),
    ),
    // 后续深蓝色页面内容直接接在该容器后即可
  ]
)

方案2：保留Card的修改方法 #

如果业务需要保留Card组件，直接将Card的背景色改为和子容器一致的深蓝色，避免漏色时出现白色差：

Card(
  elevation: 0,
  // 原白色修改为和子容器一致的深蓝色
  color: Color(0xFF1F305E),
  margin: EdgeInsets.zero,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0),),
  child: Container(
    height: 20,
    decoration: BoxDecoration(
      color: Color(0xFF1F305E),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(30.0),
        topRight: Radius.circular(30.0),
      ),
    ),
  ),
)

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