SwiftUI - 图像缩放会破坏布局答案

【问题标题】：SwiftUI - Image scaling destroys layoutSwiftUI - 图像缩放会破坏布局
【发布时间】：2022-11-08 18:14:30
【问题描述】：

我想将我的图像缩放到我的视图的全尺寸。我尝试了这篇文章的解决方案：How to resize Image 但我仍然没有设法让它以正确的方式工作。

它在顶部、左侧和右侧具有正确的填充。但它没有像我试图重新创建的设计那样对随机奖品按钮进行填充。

现在这几乎是完美的，但我希望它的左侧和右侧的填充更少。

这是我当前的主视图代码：

GeometryReader { proxy in
                        let width = proxy.size.width
                        let height = proxy.size.height
                        
                            VStack(spacing: 0) {
                                TopBarView()
                                VStack {
                                ZStack {                                                ForEach(cards.reversed()) { card in
ImageCard(card)
                                                }
                                        } 
                                }
                                }.padding(.top, 8)
                                    .padding(.leading, 12)
                                    .padding(.trailing, 12)
                                    .padding(.bottom, 16)
                                HStack {
// Random prize Button
}.cornerRadius(6)
.padding(12)
                                
                                HStack {
                                    Button() {
                                    } label: {
                                        //Red Cross Button
                                    }.frame(width: width * (32 / 100), height: width * (32 / 100))
                                    .cornerRadius(100)
                                    Spacer()
                                    Button() {
                                        
                                    } label: {
                                        // eye Button
                                    }.frame(width: width * (19.733 / 100), height: width * (19.733 / 100))
                                        .cornerRadius(50)
                                    Spacer()
                                    Button() {
                                    } label: {
                                        // Checked Button
                                    }.frame(width: width * (32 / 100), height: width * (32 / 100))
                                    .cornerRadius(100)
                                }.frame(width: width  - 24)
                                    .padding(.leading, 12)
                                    .padding(.trailing, 12)
                            }
                        }

这是 ImageCard 视图：

VStack(alignment: .center) {
                card.image
                    .resizable()
                    .cornerRadius(8)
                    .scaledToFill()
            }.frame(maxWidth: .infinity, maxHeight: .infinity)

【问题讨论】：

有没有办法告诉swift，它应该取决于使用随机奖品按钮顶部边缘的填充物的卡片大小？所以它确实保持了正确的布局
您可以包含minimal reproducible example 并格式化您的代码（Xcode 中的ctrl-i）吗？
将 .clipped() 属性与 .scaledToFill() 一起使用，这样您的图像就会被剪裁到给定帧的边界。否则，图像使用 .scaledToFill() 属性跨越框架。

标签： swift swiftui

【解决方案1】：

我需要的是图像所在的 VStack 周围的另一个 Stack，以便我可以使用 .clipped()。

使用此代码会导致我想要的结果：

GeometryReader { proxy in
            let size = proxy.size
            
            let index = CGFloat(cardVM.getIndex(card: card))
            ZStack {
                VStack(alignment: .center) {
                    card.image
                        .resizable()
                        .cornerRadius(8)
                        .scaledToFill()
                        .clipped()
                }.frame(width: size.width, height: size.height)
            }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)

【讨论】：