7

我有一个像这样的 Zstack：

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

  VStack {
    // with a lot of stuff
  }
}

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

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

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

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

4

3 回答 3

9

将您的图像放入.background：

struct ContentView: View {
    var body: some View {
        
        VStack {
            // lots of stuff
            Color.red
            Color.blue
        }
        .background(
            Image("beach")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .scaledToFill()
        )
    }
}
于 2020-10-12T16:28:34.060 回答
4

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

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

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

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）根据其内容计算其大小。

有用的链接：

在 SwiftUI 中拟合和填充视图

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

于 2021-09-15T22:02:57.860 回答
0

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

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

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

于 2021-08-23T23:23:59.427 回答