SwiftUI 图像scaledToFill() 占据整个屏幕宽度

Question

我是 SwiftUI 新手，我正在尝试实现一张卡片：

我希望图像的高度为 124 个单位。一切正常，直到我尝试将

scaledToFill()

添加到图像中。

这是我的代码：

    var body: some View {
        VStack {
            Spacer()
            
            VStack (spacing: 0) {
                Image(uiImage: Asset.Assets.licencePerksBannerCover.image)
                    .resizable()
//                    .scaledToFill()
                    .frame(height: 124)
                
                Text("Title")
            }
            .background(Color.white)
            
            Spacer()
        }
        .padding()
        .background(Color.green)
    }

这就是没有评论

scaledToFill()

时的样子： 正如您所看到的，图像被拉伸，但卡片本身遵循我为主 VStack 提供的填充。

这就是我取消注释时的样子

scaledToFill()

： 图像不再拉伸，但现在卡片占据了手机的整个宽度。

如果我还为图像指定 50 的宽度，则主绿色堆栈将按预期变为 50 单位宽，但图像仍占据手机的所有宽度：

    var body: some View {
        VStack {
            Spacer()
            
            VStack (spacing: 0) {
                Image(uiImage: Asset.Assets.licencePerksBannerCover.image)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 50, height: 124)
                
                Text("Title")
            }
            .background(Color.white)
            
            Spacer()
        }
        .padding()
        .background(Color.green)
    }

我不明白为什么

scaledToFill()

使图像占据屏幕的整个宽度。我在网上找不到任何关于它这样做的原因以及如何修复它的解释。

Answer 1

scaledToFill 导致图像溢出你所设置的框架，因此需要对其进行裁剪。如果不修剪，溢出仍然可见。

一种技术是使用

Color.clear

定义足迹，然后将图像显示为叠加层。然后应剪掉覆盖层：

VStack (spacing: 0) {
    Color.clear
        .overlay {
            Image(uiImage: Asset.Assets.licencePerksBannerCover.image)
                .resizable()
                .scaledToFill()
        }
        .clipped()
        .frame(height: 124)

    Text("Title")
}
.background(Color.white)