屏幕顶部的多余空间

Question

我正在尝试使用SwiftUI为屏幕设置背景图像。 我注意到屏幕顶部大约有10px的插图，不确定是什么？以及如何从最上方开始图像。

这是我的代码：

struct AppBackGround: ViewModifier {
    
    func body(content: Content) -> some View {
             ZStack {
                Image("background")
                    .resizable()

                    .edgesIgnoringSafeArea(.all)

                    .scaledToFill()
                    .frame(width: UIScreen.main.bounds.width,
                           height: UIScreen.main.bounds.height, alignment: .top)

//                    .clipped()

                    .border(Color.red, width: 1)
                    .Print(UIScreen.main.bounds.height)
                
                content
         }

             .background(Color.red)
    }
}

extension View {
    func withAppBackground() -> some View {
        self.modifier(AppBackGround())
    }
}

struct AppBackGround_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ZStack {
                Text("iphone 8 plus")
            }
            .withAppBackground()
            .colorScheme(.light).previewDevice("iPhone 8 Plus")
            
            ZStack {
                Text("iphone 11")
            }
            .withAppBackground()
            .colorScheme(.light).previewDevice("iPhone 11")
        }
    }
}

在下面的图片中，您可以看到在图像的确切帧周围有一个红色边框。并且您会注意到图像顶部和屏幕顶部之间有一个空格。

如果您想尝试一下，这也是原始图像。

Answer 1

我无法确切地说出这是什么小空间，但是要解决此问题，您可以将.edgesIgnoringSafeArea(.all)从Image移到ZStack，其中将整个{{1} }：

View

---

通过将struct AppBackGround: ViewModifier { func body(content: Content) -> some View { ZStack { Image("background") .resizable() // .edgesIgnoringSafeArea(.all) // remove this .scaledToFill() .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height, alignment: .top) // .clipped() .border(Color.red, width: 1) .Print(UIScreen.main.bounds.height) content } .background(Color.red) .edgesIgnoringSafeArea(.all) // add this } } 设为背景AppBackGround的{​​{1}}，可以进一步简化

Image。由于overlay由于Color.red将填满整个屏幕，因此可以删除frame。

Color.red

Answer 2

只需删除硬编码的帧，然后让图像动态填充所有可用区域

    Image("background")
        .resizable()
        .scaledToFill()
        .edgesIgnoringSafeArea(.all)

//        .frame(width: UIScreen.main.bounds.width,                    // << this !!
//               height: UIScreen.main.bounds.height, alignment: .top)