Ios 为什么导航栏在与Style.Page的选项卡栏一起使用时停止工作

实际上，如果没有Pages选项卡样式(.tabViewStyle(.page))，则顶部和底部安全区域都被覆盖，如下所示.

因此，Color.red.ignoresSafeArea()完全包含在下面的代码中.

import SwiftUI

struct ContentView1: View {
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            TabView(selection: $selectedTab) {
                NavigationStack {
                    ScrollView {
                        Text("Home Screen")
                            .navigationTitle("Home")
                            .navigationBarTitleDisplayMode(.inline)
                            .toolbar(.visible, for: .navigationBar)
                            .toolbarBackground(.visible, for: .navigationBar)
                    }
                }
                .tabItem {
                    Image(systemName: "square")
                }
                .tag(Tab.home)
            }
            //.tabViewStyle(.page)
        }
    }
}

另一方面，如果您使用的是Pages选项卡样式(.tabViewStyle(.page))，则会同时丢失顶部和底部安全区域，如下图所示.

import SwiftUI

struct ContentView2: View {
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            TabView(selection: $selectedTab) {
                NavigationStack {
                    ScrollView {
                        Text("Home Screen")
                            .navigationTitle("Home")
                            .navigationBarTitleDisplayMode(.inline)
                            .toolbar(.visible, for: .navigationBar)
                            .toolbarBackground(.visible, for: .navigationBar)
                    }
                }
                .tabItem {
                    Image(systemName: "square")
                }
                .tag(Tab.home)
            }
            .tabViewStyle(.page)
        }
    }
}

所以我有一个类似的层，它的 colored颜色 接近下面TabView以上的底部安全区域.

import SwiftUI

struct ContentView3: View {
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        ZStack {
            Color.black.opacity(0.03).ignoresSafeArea(edges: .top)
            TabView(selection: $selectedTab) {
                NavigationStack {
                    ScrollView {
                        Text("Home Screen")
                            .navigationTitle("Home")
                            .navigationBarTitleDisplayMode(.inline)
                            .toolbar(.visible, for: .navigationBar)
                            .toolbarBackground(.visible, for: .navigationBar)
                    }
                }
                .tabItem {
                    Image(systemName: "square")
                }
                .tag(Tab.home)
            }
            .tabViewStyle(.page)
        }
    }
}

下图显示了结果.