Flutter Widget注入颜色后出现线条Bug，是否为渲染问题？

现象说明 #

你遇到的界面上的细线条，是Flutter抗锯齿渲染的精度误差，属于视觉上的"颜色缝隙"——当两个带圆角的不同颜色组件紧密拼接时，圆角曲线的亚像素渲染计算会出现细微偏差，导致下层容器的颜色透过缝隙显露出来，形成视觉上的细线条。

是否属于渲染Bug？ #

这不属于严格意义上的Flutter渲染Bug，而是屏幕像素离散性与浮点运算精度限制导致的常见边缘渲染问题：屏幕的像素是离散的方形单元，而圆角是连续的曲线，渲染时需要对亚像素区域进行颜色插值计算，当两个颜色反差大的圆角组件紧密贴合时，这种插值计算的细微误差就会被视觉放大，形成可见的线条。

复现代码示例 #

...
Column(
      children: [
        Container(
          width: ...,
          clipBehavior: Clip.hardEdge,
          decoration: const BoxDecoration(
              color: .white,
          ),
          child: Card(
            color: .bg,
            elevation: 0,
            margin: EdgeInsets.zero,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(bottomRight: Radius.circular(50)),
            ),
            child: ...,
          ),
        ),
        Flexible(
          flex: 1,
          child: Container(
            width: ...,
              clipBehavior: Clip.hardEdge,
              decoration: const BoxDecoration(
                color: .bg,
              ),
            child: Card(
              color: .white,
              elevation: 0,
              margin: EdgeInsets.zero,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
              ),
              child: ...,
            )
          )
        )
      ]
    );

效果预览 #

常见解决方法 #

• 给拼接的组件添加极小的内边距/外边距（如EdgeInsets.all(0.01)），为渲染计算提供缓冲空间
• 统一父容器的背景色，减少多层颜色嵌套的渲染冲突
• 调整圆角半径为偶数像素值，降低亚像素渲染的精度误差
• 使用ClipPath替代原生圆角组件，自定义更精准的裁剪路径

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