SwiftUI Zstack - 让一个元素忽略安全区域，而另一个元素不要忽略。

Question

我有一个像这样的 Zstack：

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

  VStack {
    // with a lot of stuff
  }
}

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

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

我目前的代码使VStack也全屏显示，我不想要这种效果。

为什么所有内容都不尊重安全区域还是个谜，因为相关修饰符只应用于图像。

- Duck

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()
        )
    }
}

- vacawama

Answer 2

你的示例代码无法正常工作的原因是你在图片上使用了 scaledToFill() 修饰符，在这种特定情况下，它确实很重要。

首先，你声明了一个 ZStack，它本身不会忽略安全区域。然后你放置了一个 Image 和 resizable。 resizable 是什么呢？它将图像拉伸以适应其视图，在你的情况下就是 ZStack。

现在让我们看看我们到目前为止做了些什么。我们有一张图像，它延伸到安全区域。

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

}

现在你可以在Image上使用edgesIgnoringSafeArea属性，使图片覆盖所有区域（忽略安全区域）。 现在你有了一个尊重安全区域的ZStack和一个忽略安全区域的Image。这让你可以将VStack放入ZStack中并在其中添加内容。 VStack将填充其父视图，即ZStack，因此它也将尊重安全区域（请参见下面的代码和图像）。

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

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

最后，您在此添加.scaledToFill()修饰符，将图像拉伸以包含所有区域，并通过这样做使ZStack视图成为孔区域，因为适合视图的大小（ZStack、HStack、VStack）基于其内容计算。

有用的链接:

SwiftUI中适应和填充视图

如何调整SwiftUI图像的大小并保持其宽高比

- khserver

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 中的内容大小。

- TenaciousJay

---

我选择这个！很棒的解决方案！ - FrugalResolution