SwiftUI中TabView干扰启动页头部高度的适配问题

• 重复嵌套导航容器：ContentView最外层已经包裹了NavigationView，StartUpView内部又额外套了一层NavigationView，双层导航结构会让系统计算安全区域时重复叠加导航栏高度，最终GeometryReader读取到的safeAreaInsets.top值远大于单导航场景的正常值，直接导致蓝色区块高度异常翻倍。
• 修饰符挂载位置错误：你将navigationTitle、toolbar等导航栏配置修饰符挂在了蓝色色块子视图上，同时给色块单独加了.ignoresSafeArea()，会干扰视图层级的布局边界计算，进一步放大高度异常问题。

• 第一步：删除StartUpView内部多余的NavigationView容器，整个App的Tab页层级只保留ContentView外层的唯一导航容器即可。
• 第二步：将导航栏相关的navigationTitle、toolbar修饰符移动到StartUpView的根视图层级，不要挂载在内部的蓝色子视图上。
• 第三步：调整蓝色区块的高度计算逻辑，要么直接匹配系统导航栏+顶部安全区的总高度，要么直接写死你需要的15mm固定高度，避免比例换算带来的多场景适配问题。

struct ContentView: View {
    @State private var selectedTab: Tabs = .home

    var body: some View {
        NavigationView {
            TabView (selection: $selectedTab) {
                StartUpView()
                    .tabItem {
                        Label("Tab A", systemImage: "a.circle.fill")
                    }.tag(Tabs.taba)

                TabBView()
                    .tabItem {
                        Label("Tab B", systemImage: "b.circle.fill")
                    }.tag(Tabs.tabb)

                TabCView()
                    .tabItem {
                        Label("Tab C", systemImage: "c.circle.fill")
                    }.tag(Tabs.tabc)

                TabDView()
                    .tabItem {
                        Label("Tab D", systemImage: "d.circle.fill")
                    }.tag(Tabs.tabd)

                TabEView()
                    .tabItem {
                        Label("Tab E", systemImage: "e.circle.fill")
                    }.tag(Tabs.tabe)
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct StartUpView: View {
    var body: some View {
        GeometryReader { g in
            ZStack(alignment: .top) {
                Color.blue
                    // 高度 = 顶部安全区高度 + 系统标准导航栏高度44pt，和原生导航栏高度完全匹配
                    .frame(height: g.safeAreaInsets.top + 44)
                    .ignoresSafeArea()
                
                // 其余业务子视图放置在此处
            }
            // 导航配置统一挂在根视图
            .navigationTitle("Title")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    NavigationLink (destination: SettingsView()) {
                        Image(systemName: "line.3.horizontal")
                            .resizable()
                            .foregroundColor(.white)
                            .frame(width: 16, height: 16)
                    }
                }

                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        print("save tapped!")
                    }){
                        Text("Save")
                            .foregroundColor(.white)
                    }
                }
            }
        }
    }
}

如果你需要严格固定15mm的蓝色区块高度，不需要跟随安全区变化，可以把色块高度替换为固定值：

Color.blue
    .frame(height: 15 * 3.78) // 1mm约等于3.78pt，直接换算为屏幕点单位
    .ignoresSafeArea()

内容的提问来源于stack exchange，提问作者Galen Smith