SwiftUI Zstack – 让元素忽略安全区域，而另一个元素则不会

Question

我有这样的 Zstack：

ZStack {
  Image("beach")
    .resizable()
    .edgesIgnoringSafeArea(.all)
    .scaledToFill()

  VStack {
    // with a lot of stuff
  }
}

我希望图像忽略安全区域，但是Vstack必须尊重安全区域。

该图片是一张背景图片，应该覆盖所有区域。

我的这段代码也使 VStack 全屏显示，我不希望这样。

为什么一切都不尊重安全区域是个谜，因为相应的修改器仅应用于图像。

Answer 1

将您的图片放入 .background:

struct ContentView: View {
    var body: some View {
        
        VStack {
            // lots of stuff
            Color.red
            Color.blue
        }
        .background(
            Image("beach")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .scaledToFill()
        )
    }
}

Answer 2

另一种对我有用的方法是：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.clear
                .background(
                    Image("beach")
                        .resizable()
                        .ignoresSafeArea()
                        .scaledToFill()
                )
            
            VStack {
                // lots of stuff
            }
        }
    }
}

注意：在我的例子中，当尝试将 .background 放在 VStack 上的其他解决方案时，图像没有填满整个屏幕，而是缩小以适应 VStack 中的大小。

Answer 3

它不适用于您的示例的原因是您在图像上使用了 scaledToFill() 修饰符，在这种特殊情况下它很重要。

首先你声明了ZStack，它本身不会忽略安全区域。在你输入 Image 和 resizable 之后。可调整大小的作用是拉伸图像以适合其视图，在您的情况下是 ZStack.

让我们看看我们有什么，直到 now.We 有一张延伸到安全区域的图像。

ZStack {
  Image("Breakfast").resizable()       

}

所以从现在开始你把edgesIgnoringSafeArea放在Image上，让图像覆盖所有区域（忽略安全区域）。现在你有 Zstack 尊重安全区域， Image 忽略安全区域。这使您可以将 VStack 放入 ZStack 并在其中添加人员。 VStack 将填充其父视图，即 ZStack，因此它也将遵守安全区域（请参见下面的代码和图片）。

ZStack {
  Image("Breakfast").resizable().edgesIgnoringSafeArea(.all)       

  VStack {
    Text("hello")
    Spacer()
  }
}

最后添加.scaledToFill()修改器，将图像拉伸到包含所有区域，这样做使ZStack视图成为孔区域，作为拟合视图的( ZStack, HStack, VStack) 根据其内容计算其大小。

有用link:

Fitting and filling views in SwiftUI

How to resize a SwiftUI Image and keep its aspect ratio

SwiftUI Zstack – 让元素忽略安全区域，而另一个元素则不会

SwiftUI Zstack – Make element ignore safe area and another one don't

swift

swiftui

vstack

zstack