如何去除Flutter Row组件中图片间的白色线条？

你遇到的这种图片间白色线条问题，大多是Flutter在高DPI的iOS设备上渲染时的像素对齐误差，或者布局组件间的微小间隙导致的，试试下面这几种解决方法：

方法1：强制图片从像素边界渲染 #

给每个Image组件加上alignment: Alignment.topLeft，让图片从整数像素位置开始绘制，避免浮点坐标带来的间隙：

Expanded(
  child: Image.asset(
    'assets/images/profile.png',
    fit: BoxFit.cover,
    color: Colors.red,
    alignment: Alignment.topLeft, // 添加该行
  ),
)

方法2：让布局完全拉伸填满空间 #

把Column的mainAxisAlignment设为MainAxisAlignment.stretch，每个Row的crossAxisAlignment设为CrossAxisAlignment.stretch，确保图片完全填满分配的空间，消除潜在的布局间隙：

return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.stretch, // 添加该行
    children: [
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 修改该行
          children: [/* 图片组件 */],
        ),
      ),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 修改该行
          children: [/* 图片组件 */],
        ),
      )
    ],
  ),
);

方法3：关闭图片渲染插值 #

给Image添加filterQuality: FilterQuality.none，减少渲染时的插值计算，避免因像素插值产生的白色线条：

Expanded(
  child: Image.asset(
    'assets/images/profile.png',
    fit: BoxFit.cover,
    color: Colors.red,
    filterQuality: FilterQuality.none, // 添加该行
  ),
)

方法4：用同色容器包裹图片 #

如果上面的方法都不生效，用Container把每个图片包起来，设置容器背景色和图片颜色一致，即使有间隙也会被同色背景覆盖：

Expanded(
  child: Container(
    color: Colors.red, // 和图片颜色保持一致
    child: Image.asset(
      'assets/images/profile.png',
      fit: BoxFit.cover,
      color: Colors.red,
    ),
  ),
)

优先尝试前三种方法的组合，一般就能解决问题。

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