Flutter两个container之间出现分隔线

461 阅读1分钟

当使用两个Container拼接在一起时,出现分割线

Column(
  children: [
    Container(
      height: 10,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
        color: AppColors.white,
      ),
      alignment: Alignment.bottomCenter,
      width: 285,
    ),
    Container(
      height: 10,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
        color: AppColors.white,
      ),
      alignment: Alignment.bottomCenter,
      width: 285,
    ),
  ],
);

image.png

原因flutter的绘制引擎无法正确对其物理像素,出现了间隙 ,漏出了背景色

解决方法:添加边框设置宽度为0

Column(
  children: [
    Container(
      height: 10,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
        color: AppColors.white,
        border: Border.all(width: 0,color: Colors.white)
      ),
      alignment: Alignment.bottomCenter,
      width: 285,
    ),
    Container(
      height: 10,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
        color: AppColors.white,
      ),
      alignment: Alignment.bottomCenter,
      width: 285,
    ),
  ],
);

参考issue