SwiftUI中如何设置UIImage高度始终等于宽度以实现正方形比例

实现方案 #

你只需要给网格内的Image视图添加aspectRatio修饰符强制1:1宽高比即可，由于你已经设置了maxWidth: .infinity让宽度撑满网格分配的单元格宽度，添加该修饰符后高度会自动和宽度保持一致，实现正方形效果。

核心修改点 #

在Image的修饰链中插入一行.aspectRatio(1, contentMode: .fit)即可，修改后的完整代码如下：

struct ContentView: View {
    var items: [GridItem] {
        Array(repeating: .init(.adaptive(minimum: 120)), count: 2)
    }

    private var gridItemLayout = [GridItem(.flexible(), spacing: 20), GridItem(.flexible(), spacing: 20)]

    private var colors: [Color] = [.yellow, .purple, .green]

    var body: some View {
        NavigationView {
            ScrollView(.vertical, showsIndicators: false) {
                LazyVGrid(columns: gridItemLayout, spacing: 20) {
                    ForEach(0 ... 6, id: \.self) {
                        Image(systemName: "plus")
                            .font(.system(size: 30))
                            .frame(maxWidth: .infinity)
                            .aspectRatio(1, contentMode: .fit) // 新增的宽高比控制代码
                            .background(colors[$0 % colors.count])
                            .cornerRadius(10)
                            .padding(0)
                    }
                }
            }.navigationBarTitle(Text("Add Widget"))
                .padding(0)
        }
    }
}

可选调整 #

如果希望图片内容填满整个正方形且超出部分裁剪，可以把contentMode改为.fill，再补充.clipped()修饰符即可：

.aspectRatio(1, contentMode: .fill)
.clipped()

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