移除Flutter轮播图图片间距：解决真机垂直闪烁线问题

可能原因及对应解法 #

1. 确保图片完全填充容器 #

部分机型会因图片未填充满父容器出现间隙，需设置图片的fit属性为BoxFit.cover或BoxFit.fill，同时强制图片占满容器尺寸：

Image.network(
  imageUrl,
  fit: BoxFit.cover,
  width: double.infinity,
  height: double.infinity,
)

2. 清除CarouselSlider的默认间距 #

CarouselSlider默认可能存在视口占比不足或首尾padding，需调整参数消除间隙：

CarouselSlider(
  options: CarouselOptions(
    viewportFraction: 1.0, // 每个item占满整个视口宽度
    padEnds: false, // 关闭首尾item的默认padding
    height: 200,
  ),
  items: imageList.map((imageUrl) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.zero,
          padding: EdgeInsets.zero,
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
        );
      },
    );
  }).toList(),
)

3. 强制像素对齐（针对真机渲染bug） #

Nokia 7 Plus这类机型可能存在小数像素渲染偏移，可强制容器尺寸为整数像素：

return Container(
  width: MediaQuery.of(context).size.width.floorToDouble(),
  height: 200.floorToDouble(),
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
);

4. 关闭图片抗锯齿（极端情况） #

若上述方法无效，尝试关闭图片抗锯齿避免渲染间隙：

Image.network(
  imageUrl,
  fit: BoxFit.cover,
  filterQuality: FilterQuality.none,
)

该问题仅出现在特定真机，大概率是设备像素渲染的特殊bug，优先尝试前两种方案，若无效再依次测试后两种。

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