SwiftUI图片显示为正方形

问题描述

在显示的图片中，尝试将每个图片显示为正方形：

LazyVGrid(columns: columns) {
    ForEach(savePhotos) { img in
        VStack {
            if let photoData = img.photo, let photo = UIImage(data: photoData) {
                Image(uiImage: photo)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 80, height: 80)
            }
        }
    }
}

但是发现设置为scaledToFill后，无法通过frame约束图片的形状。

解决方案

使用 clipped() 修饰符裁剪超出边界的图片，避免超出正方形范围。

通过添加clipped()修饰符后，实现正方形的效果。

LazyVGrid(columns: columns) {
    ForEach(savePhotos) { img in
        VStack {
            if let photoData = img.photo, let photo = UIImage(data: photoData) {
                Image(uiImage: photo)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 80, height: 80)
                    .clipped()
            }
        }
    }
}

总结

实现正方形效果主要涉及下面三个功能：

1、frame(width: 80, height: 80) 保证图片区域是正方形。

2、配合 scaledToFill()，确保图片完全覆盖正方形框架，即便有部分被裁剪。

3、使用 clipped() 修饰符裁剪超出边界的图片，避免超出正方形范围。

通过这三个功能可以实现图片显示为正方形。