SwiftUI：防止Image（）将视图矩形扩展到屏幕边界之外

Question

我要实现的目标

我正在尝试创建一个SwiftUI视图，其中图像应扩展整个屏幕（edgesIgnoringSafeArea(.all)），然后在其上覆盖一个视图，该视图也将填充整个屏幕，但要注意安全区域

我尝试过的

这是我的代码，很接近：

struct Overlay: View {
  var body: some View {
    VStack {
      HStack {
        EmptyView()
        Spacer()
        Text("My top/right aligned view.")
          .padding()
          .background(Color.red)
      }
      Spacer()
      HStack {
        Text("My bottom view")
          .padding()
          .background(Color.pink)
      }
    }
  }
}

struct Overlay_Previews: PreviewProvider {
  static var previews: some View {
    ZStack {
      Image(uiImage: UIImage(named: "background")!)
        .resizable()
        .edgesIgnoringSafeArea(.all)
        .aspectRatio(contentMode: .fill)
      Overlay()
    }
  }
}

问题和经过测试的解决方案

问题在于图像没有被裁剪，因此它会将父视图扩展到大于屏幕宽度的宽度，然后使右上方对齐的红色文本框浮出屏幕（参见图像）。 / p>

我尝试在不同的地方使用.clipped()，但是没有运气。如果可能，我最好避免使用GeometryReader。

问：如何使图像视图仅填充整个屏幕？

Answer 1

您必须限制边界 Image 的帧大小，然后再由 ZStack 拾取它，以避免 ZStack 会增长，因此 Overlay 会错位。

基于父视图的大小

struct IgnoringEdgeInsetsView2: View {
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                Image("smile")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                    .frame(maxWidth: geometry.size.width,
                           maxHeight: geometry.size.height)
            }
            Overlay()
        }
    }
}

基于屏幕尺寸

struct IgnoringEdgeInsetsView: View {
    var body: some View {
        ZStack {
            Image("smile-photo")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
                .frame(maxWidth: UIScreen.main.bounds.width, 
                       maxHeight: UIScreen.main.bounds.height)
            Overlay()
        }
    }
}

Answer 2

无需弄乱 GeometryReader。相反，您可以使用 .background() 修饰符来防止图像溢出。

struct ContentView: View {
    var body: some View {
        Overlay()
        .background( /// here!
            Image("City")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .ignoresSafeArea()
        )
    }
}

结果：