SwiftUI中TabView内部的导航栏和状态栏颜色/透明度冲突问题

Question

我的应用程序由几个视图组成，分布在不同的选项卡中，这些选项卡位于TabView内。这些视图创建自己的NavigationView。不幸的是，TabView的存在使它们的颜色和透明度与应用程序的状态栏产生冲突，导致状态栏与导航栏不再一致。

使用以下代码可以轻松在示例应用程序中复现此问题。

struct ContentView: View {
    var body: some View {
        TabView {
            NavView()
        }
    }
}

struct NavView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10, id: \.self) { _ in
                    Section(header: Text("Foo")) {
                        Text("Bar")
                    }
                }
            }
            .listStyle(GroupedListStyle())
            .navigationBarTitle("Foobar")
        }
    }
}

我正在使用分组列表样式来使样式更明显，但它与默认样式相同。

是否有SwiftUI API可以访问状态栏样式？或者可能有其他解决方法？

- Kilian

---

我在我的TabView上使用了.edgesIgnoringSafeArea(.top)，这样NavigationView或其他任何东西的颜色都会被显示出来。此外，我认为NavigationView再次获得了正确的插图，因为它不会破坏我的导航栏标题顶部偏移。 - gujci

太棒了，这就解决了问题。谢谢！如果您把它放在答案中，我很乐意将其标记为解决方案。 - Kilian

Answer 1

根据苹果的文档，edgesIgnoringSafeArea(_:) 应该应用于 TabView ：

https://developer.apple.com/documentation/swiftui/vsplitview/3288813-edgesignoringsafearea

在指定的边缘将视图延伸出安全区域。

struct ContentView: View {
    var body: some View {
        TabView {
            NavView()
        } // .edgesIgnoringSafeArea(.top) no longer necessary as of iOS 13.4
    }
}

注意：看起来苹果已经改变了默认行为，因此在iOS 13.4中不再需要这样做。

- fulvio

---

这在 iPhone 11 模拟器上无法运行（XCode 11.4）。 - Lorenzo Fiamingo

这是个bug。导航视图在刘海下面滑动。 - Joris Mans

苹果似乎改变了默认行为，使用 iOS 13.4 不再需要这样做了。 - Kilian

Answer 2

由于某些原因，它在我的情况下无法正常工作。情况是模拟器上没有应用edgesIgnoringSafeArea(_:)可以正常运行，但在设备上却不能。反之亦然。

创建了一个小修饰符来解决问题。

struct EdgeIgnoringSafeAreaModifier: ViewModifier {

    var edges: Edge.Set

    func body(content: Content) -> some View {
        #if targetEnvironment(simulator)
        return content
        #else
        return content.edgesIgnoringSafeArea(self.edges)
        #endif
    }
}

extension View {
    func edgeIgnoringSafeAreaForDevice(_ edges: Edge.Set) -> some View {
        self.modifier(EdgeIgnoringSafeAreaModifier(edges: edges))
    }
}

- Faruk