Flutter GridView展示图片宽高不一致，如何实现宽高相等或留白填充？

出现图片尺寸不一致的核心原因是Stack默认自适应子元素图片的原始尺寸，没有撑满GridView分配给每个子项的固定比例区域，按如下方式修改即可：

• 给自定义组件外层增加撑满父容器的约束，同时设置白色背景，根据需求选择图片适配规则：
  • 希望图片完整显示、尺寸不足区域留白：设置fit: BoxFit.contain
  • 希望图片完全铺满区域、等比例裁剪超出部分：设置fit: BoxFit.cover
• 移除itemBuilder中不必要的Container嵌套，避免额外的尺寸约束干扰

修改后的自定义组件代码 #

Widget selectedimage(image) {
  return SizedBox.expand(
    child: Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Image.file(image, fit: BoxFit.contain),
          Positioned(
            right: 12,
            bottom: 10,
            child: Image.asset("assets/images/selected.png", width: 26, height: 26),
          )
        ],
      ),
    ),
  );
}

Widget nonselected(image) {
  return SizedBox.expand(
    child: Container(
      color: Colors.white,
      child: Image.file(image, fit: BoxFit.contain),
    ),
  );
}

修改后的itemBuilder代码 #

itemBuilder: (ctx, index) {
  saveallimages(titles.items);
  return GestureDetector(
    onTap: () => add(titles.items[index].image),
    child: selected.contains(titles.items[index].image.path.toString())
      ? selectedimage(titles.items[index].image)
      : nonselected(titles.items[index].image)
  );
}

修改完成后所有GridView子项的宽高都会严格遵循你设置的childAspectRatio: 115/162.05，不会出现尺寸不一致的问题。

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