如何阻止背景图像影响 ZStack 中其上方项目的填充？

Question

通过以下 SwiftUI 代码，我得到一个漂亮的半透明圆角矩形，它填充屏幕减去默认填充：

    ZStack {
        Rectangle()
            .fill(Material.regular)
            .cornerRadius(20)
            .padding()
            .ignoresSafeArea()
    }
    
    .statusBar(hidden: true)
    .persistentSystemOverlays(.hidden)

但是，一旦我在 ZStack 中的矩形后面添加图像，它就会失去其填充：

    ZStack {
        Image("Default_Photo_Background")
        Rectangle()
            .fill(Material.regular)
            .cornerRadius(20)
            .padding()
            .ignoresSafeArea()
    }
    
    .statusBar(hidden: true)
    .persistentSystemOverlays(.hidden)

请问我该如何解决这个问题？

Answer 1

添加

.resizable()

，可能还有

.aspectRatio()

，到

Image

似乎可以解决这个问题。但如果没有更多细节，我无法确定这就是您正在寻找的结果。

Image("Default_Photo_Background")
    .resizable() // Add this
    .aspectRatio(contentMode: .fit) // or .fill // And maybe this
Rectangle()
    ... // the rest