如何在 SwiftUI 中处理安全区域 Space 而忽略它

Question

我想完全着色我的应用程序的背景，同时将内容放在顶部，以便它离状态栏和拥有它的设备上的顶部槽口足够远。

如果我这样做：

@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            VStack {
                Text("Top of my view")
                Spacer()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.yellow)
        }
    }
}

这会在内容顶部、安全区域下方显示文本。但只有内容区域是黄色的。安全区域是白色的。

所以我在 .background 修饰符下面添加 .edgesIgnoringSafeAreas(.all)。

现在我的文字位于凹口下方（或在状态栏文字下方的屏幕顶部向上滑动）并且不可见。

我不想随意猜测顶部填充，因为这在有凹口的手机上可能没问题，但在没有通知的情况下在手机或 iPad 上看起来不对。

如果我将 VStack 放在 GeometryReader 中，当顶部安全区域被忽略时，reader.safeAreaInsets.top 为零 (0)。

我希望这是一个足够清楚的问题。有人运行对此有解决方案吗？

Answer 1

您只需要将 edgesIgnoringSafeArea 修饰符应用于 Color.yellow。

一个可能的解决方案是使用 ZStack:

@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            ZStack {
                Color.yellow
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    Text("Top of my view")
                    Spacer()
                }
            }
        }
    }
}

Answer 2

修复它的一种方法是将 .edgesIgnoringSafeArea(.all) 应用到 .background() 内部的 Color.yellow:

@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            VStack {
                Text("Top of my view")
                Spacer()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.yellow.edgesIgnoringSafeArea(.all))
        }
    }
}

如何在 SwiftUI 中处理安全区域 Space 而忽略它

How to Handle Safe Area Space in SwiftUI While Ignoring It

swiftui

safearealayoutguide