如何在SwiftUI网格中裁剪矩形图片为正方形且避免拉伸？

你的问题出在contentMode: .fit上——这个模式会让图片完整显示在正方形区域里，矩形图片就会留空白，自然裁剪没效果。要实现裁剪成正方形且单元格自适应网格空间，改这几点就行：

修改步骤 #

• 把图片的contentMode从.fit换成.fill：让图片填满整个正方形区域，超出的部分就可以被裁剪
• 加上.clipped()：真正裁掉超出正方形的部分（原来的clipShape(Rectangle)没用是因为.fit模式下图片没超出边界）
• 优化网格列配置：你写了两个.adaptive的GridItem，其实只需要一个就能让网格自动适配屏幕宽度生成列数，避免冗余

修改后的完整代码 #

struct GalleryView: View {
    @State private var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9].shuffled()

    // 优化列配置：单个adaptive GridItem自动适配列数
    let columns = [
        GridItem(.adaptive(minimum: 100))
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(arr, id: \.self) { id in
                    Image("test\(id)")
                        .resizable()
                        .aspectRatio(1, contentMode: .fill) // 填满正方形区域
                        .clipped() // 裁剪超出部分
                        .cornerRadius(20)
                        .listRowSeparator(.hidden)
                }
            }
            .padding(.horizontal)
        }
    }
}

原理说明 #

• .aspectRatio(1, contentMode: .fill)强制图片以1:1比例填充所在视图，不管图片本身是横还是竖，都会铺满正方形区域
• .clipped()会把超出当前视图边界的部分裁掉，配合cornerRadius就能得到带圆角的正方形裁剪图
• .adaptive的GridItem会根据屏幕宽度自动计算能放多少列，每列宽度不小于100，完全符合你"单元格按需占用网格空间"的要求

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