如何制作方形图像的 LazyVGrid？

Question

如何制作类似于照片库的方形图像？

我正在尝试以下操作：

let columns: [GridItem] = [
  GridItem(.flexible()),
  GridItem(.flexible())
]

LazyVGrid(
    columns: columns,
    alignment: .center
) {
    ForEach(self.selectedImages, id: \.self) { image in
        Image(uiImage: image)
            .resizable()
            .scaledToFit()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .aspectRatio(1, contentMode: .fill)
            .background(Color.blue)
    }
}

然而，这会导致这样的结果：

我想构建一个 2x2 的正方形网格（类似于下面的 3x3 - 我希望图像能够很好地融入正方形）

Answer 1

尝试这个。它提供正确的宽高比并正确剪辑图像以填充正方形：

ForEach(self.selectedImages, id: \.self) { image in
    Color.blue
        .aspectRatio(1, contentMode: .fill)
        .overlay(
            Image(uiImage: image)
                .resizable()
                .scaledToFill()
        ).clipped()
}