Flutter开发：如何消除ClipRRect组件间的空白？

你的问题出在Wrap子项（壁纸）的高度不一致——Wrap会根据每个子项的实际高度排列，当某一行内的壁纸高度不同时，下一行的壁纸就会和上方行形成空隙（参考你提供的截图）。

下面是几种直接有效的解决办法：

方法1：固定图片高度+填充模式 #

给CachedNetworkImage设置固定高度，并通过fit: BoxFit.cover保证图片填充容器，避免变形：

SafeArea(
  child: SingleChildScrollView(
    child: Wrap(
      children: [
        for (int i = 0; i < 24; i++)
          Padding(
            padding: const EdgeInsets.all(6.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: CachedNetworkImage(
                imageUrl: top2Wall[i]['attributes']['src'],
                width: 188,
                height: 282, // 按16:9比例计算，可根据需求调整
                fit: BoxFit.cover,
              ),
            ),
          )
      ],
    ),
  ),
)

方法2：用AspectRatio统一宽高比 #

如果不想硬写高度，可以用AspectRatio组件固定壁纸的宽高比例，适配不同屏幕：

SafeArea(
  child: SingleChildScrollView(
    child: Wrap(
      children: [
        for (int i = 0; i < 24; i++)
          Padding(
            padding: const EdgeInsets.all(6.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: AspectRatio(
                aspectRatio: 2/3, // 比如设置2:3的竖屏比例
                child: CachedNetworkImage(
                  imageUrl: top2Wall[i]['attributes']['src'],
                  fit: BoxFit.cover,
                ),
              ),
            ),
          )
      ],
    ),
  ),
)

方法3：优化Wrap布局属性（辅助） #

配合上面两种方法，给Wrap添加对齐属性，确保子项靠上排列：

Wrap(
  alignment: WrapAlignment.start,
  crossAxisAlignment: WrapCrossAlignment.start,
  children: [
    // ...子项代码
  ],
)

核心逻辑：只有让所有壁纸容器的尺寸完全一致，Wrap的每行才会对齐，空隙自然就消失了。

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