SwiftUI 图像剪辑到 ZStack - 图像延伸到屏幕边缘，忽略父堆栈的填充

Question

这是我在这里的第一个问题。

我想在这个视图的边缘填充：

struct Test3: View {
    var body: some View {
        VStack {
            ZStack {
                Color.blue
                    Image("SplashPage")
                        .resizable()
                        .scaledToFill()
                }
            ZStack {
                Color.gray
                Button("touch me", action: {})
            }
           .frame(width: .infinity, height: 48)
        }
        .padding(24)
    }
}

我在这里搜索并认为这篇文章可以解决我的问题：

SwiftUI 图像剪辑ToBounds

.clipped()

-> 不。

我在网上搜索过。 ChatGPT 问道。看了 hackingwithswift。 寻找“遮罩图像 SwiftUI”和“SwiftUI 剪辑图像到 ZStack”

...不。

我一直试图找出我做错了什么，但我就是想不通：

我有一个 VStack，其中包含 2 个 ZStack。这个VStack周围的填充为24。

在第一个VStack中，我添加了一个图像，即

.resizable()

和

.scaledToFill()

我预计图像会根据 24 点填充进行裁剪。我希望这能够尊重 iPhone SE 和 iPhone 14 Pro 或任何大型模拟器上的填充。

第二个 VStack 有一个带有

.frame(width: .infinity, height: 48)

的按钮。如果我注释掉这一行，那么图像就会按预期运行！

Answer 1

此问题是由

scaledToFill()

上的

Image

引起的。它似乎填满了整个屏幕并忽略了填充。

作为修复，您可以使用

GeometryReader

来测量真正可用的空间，并在

Image

上设置此大小。设定好尺寸后，还需要

.clipped()

。

顺便说一句，您试图在第二个

width

上设置

.infinity

为

VStack

。这是行不通的（我在控制台中看到了错误）。它需要改为

maxWidth

。

VStack {
    ZStack {
        Color.blue
        GeometryReader { proxy in
            Image(systemName: "ladybug.fill") //  "SplashPage"
                .resizable()
                .scaledToFill()
                .foregroundColor(.orange)
                .frame(width: proxy.size.width, height: proxy.size.height)
                .clipped()
        }
    }
    ZStack {
        Color.gray
        Button("touch me", action: {})
    }
    .frame(maxWidth: .infinity)
    .frame(height: 48)
}
.padding(24)