SwiftUI中LazyVGrid内Data转Image显示尺寸异常求助

核心原因 #

你的代码里的Image仅设置了.resizable()和.aspectRatio(contentMode: .fill)，既没限制尺寸也没做裁剪；再加上LazyVGrid的自适应列布局在渲染第一行时，缺乏足够约束确定图片高度，最终导致第一行图片尺寸异常。另外，直接强制解包UIImage(data: image)!存在崩溃风险，也是需要修正的点。

修复步骤 #

• 添加尺寸约束与裁剪
  给Image加上固定尺寸和裁剪修饰，让每一个网格项的尺寸保持一致，消除布局异常：

  Image(uiImage: uiImage!)
      .resizable()
      .aspectRatio(contentMode: .fill)
      .frame(width: 80, height: 80)
      .clipped()
  

• 替换不安全的强制解包
  用可选绑定处理UIImage的初始化结果，避免图片数据无效时崩溃：

  ForEach(images, id: \.self) { image in
      if let uiImage = UIImage(data: image) {
          // 正常显示图片的代码
      } else {
          // 显示占位视图，比如灰色块
          Color.gray.frame(width: 80, height: 80)
      }
  }
  

• 优化ForEach的标识（可选）
  用\.self作为id，如果存在重复的图片数据会触发布局问题，建议用枚举索引生成唯一标识：

  ForEach(Array(images.enumerated()), id: \.offset) { _, image in
      // 后续代码不变
  }
  

完整修复后的代码片段 #

let columns = [
    GridItem(.adaptive(minimum: 80))
]

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(Array(images.enumerated()), id: \.offset) { _, image in
            if let uiImage = UIImage(data: image) {
                Image(uiImage: uiImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 80, height: 80)
                    .clipped()
            } else {
                Color.gray.frame(width: 80, height: 80)
            }
        }
    }
}
.padding(.horizontal)

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