SwiftUI Zstack - 使元素忽略安全区域而另一个不

Question

我有一个这样的 Zstack：

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

  VStack {
    // with a lot of stuff
  }
}

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

该图像是应覆盖所有区域的背景图像。

我的这段代码也在VStack全屏显示，我不想要那样。

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

Answer 1

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

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

让我们看看到目前为止我们有什么。我们有一个一直延伸到安全区域的图像。

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

}

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

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

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

最后在这里添加.scaledToFill()修改器，它拉伸图像以包含所有区域，通过这样做，它使ZStack视图成为孔区域，因为拟合视图（ZStack，HStack，VStack）根据其内容计算其大小。

有用的链接：

在 SwiftUI 中拟合和填充视图

如何调整 SwiftUI 图像大小并保持其纵横比

Answer 2

将您的图像放入.background：

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

Answer 3

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

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

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