SwiftUI LazyVGrid中AsyncImage图片拉伸不遵循宽高比问题

问题根源 #

代码中图片拉伸变形的核心原因是强制给图片设置了1:1的固定宽高比：

• 调用.aspectRatio(1, contentMode: .fit)时，传入的参数1会直接约束视图必须按照1:1的正方形比例渲染，完全无视图片自身的原始宽高比
• 这里的contentMode仅能控制图片在这个强制生成的1:1正方形框内的缩放适配规则，无法改变容器本身的固定比例，因此无论传入.fit还是.fill都无法解决变形问题。

实现方案 #

要达到「图片保持原始宽高比不变形、同时完全填满正方形网格单元」的预期效果，只需要做两处调整：

• 先为每个网格条目设置1:1的正方形容器，宽度自适应匹配网格列宽，同时开启内容裁剪，裁掉溢出容器范围的内容
• 图片本身不绑定固定宽高比，使用等比填充规则铺满整个正方形容器即可

修正后的核心实现代码：

struct ContentView: View {
    @State private var results = [Result]()
    
    let columns = [
        GridItem(.flexible(), spacing: 1),
        GridItem(.flexible(), spacing: 1),
        GridItem(.flexible(), spacing: 1),
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 1) {
                ForEach(results, id: \.self) { result in
                    AsyncImage(url: URL(string: result.urls.small)) { phase in
                        switch phase {
                        case .success(let image):
                            image
                                .resizable()
                                .scaledToFill()
                        case .failure, .empty:
                            // 可按需自定义加载中、加载失败的占位样式
                            Color.gray.opacity(0.3)
                        @unknown default:
                            Color.gray.opacity(0.3)
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .aspectRatio(1, contentMode: .fill)
                    .clipped()
                }
            }
        }
    }
}

异常运行效果 #

调整前的变形效果如下图：

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