Flutter横向ListView图片尺寸不符预期，寻求问题排查与解决

你的代码里主要有两个问题导致图片尺寸不符合预期：

1. Image未占满Card的可用高度：当前Image只根据自身宽高比和BoxFit.fitWidth适配宽度，没有强制填充Card的垂直空间，所以图片高度无法撑满Card，出现上下留白。
2. ClipRRect与Card的 borderRadius 冲突：Card已经设置了20的圆角，内部又套了一个10圆角的ClipRRect，会导致视觉上的圆角不一致，也可能限制图片的显示范围。

修改后的代码： #

SizedBox(
  height: 300,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemBuilder: (BuildContext ctx, int index) {
      return SizedBox(
        width: MediaQuery.of(context).size.width * 0.5,
        child: Card(
          margin: const EdgeInsets.all(10),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0), // 和Card圆角保持一致
            child: Image.file(
              File(_imageFileListM[index].path),
              fit: BoxFit.cover, // 保持图片比例并填满容器
              width: double.infinity,
              height: double.infinity, // 强制占满Card的高度
            ),
          ),
        ),
      );
    },
    itemCount: _imageFileListM.length,
  ),
)

关键调整说明： #

• 给Image.file添加height: double.infinity和width: double.infinity，让图片强制填充父容器的全部空间。
• 将BoxFit.fitWidth改为BoxFit.cover，既保持图片的宽高比例，又能让图片填满整个Card区域，避免留白或变形。
• 统一ClipRRect和Card的borderRadius值，确保圆角效果一致，避免内部图片圆角和Card边框圆角不匹配的问题。

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