SwiftUI Page风格TabView内嵌NavigationView首次加载标题位置偏低如何修复

这个是SwiftUI使用PageTabViewStyle嵌套NavigationView时的已知渲染bug，根因是首次渲染时系统未正确计算顶部安全区的导航栏高度，导致大标题位置偏移，切换标签后视图重新触发布局计算就会恢复正常。

可行修复方案 #

方案1：最小改动修复

首先你代码里存在冗余嵌套问题：SettingsItem作为导航跳转的目标页，不需要再单独嵌套NavigationView，外层SettingsView已经提供了导航栈，重复嵌套会加重布局异常问题。
在此基础上只需在SettingsView中新增少量代码触发导航栏重新布局即可：

struct SettingsView: View {
    // 新增状态变量控制导航标题显示模式
    @State private var titleDisplayMode: NavigationBarItem.TitleDisplayMode = .large
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("General")) {
                    NavigationLink(destination: SettingsItem(title: "1")) {
                        Text("1")
                    }
                    NavigationLink(destination: SettingsItem(title: "2")) {
                        Text("2")
                    }
                    NavigationLink(destination: SettingsItem(title: "3")) {
                        Text("3")
                    }
                    NavigationLink(destination: SettingsItem(title: "4")) {
                        Text("4")
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Settings")
            // 绑定显示模式
            .navigationBarTitleDisplayMode(titleDisplayMode)
            // 首次出现时切换模式触发重绘
            .onAppear {
                DispatchQueue.main.async {
                    titleDisplayMode = .inline
                    titleDisplayMode = .large
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

// 移除冗余的NavigationView
struct SettingsItem: View {
    @State var title = "Title"
    
    var body: some View {
        List {
            
        }
        .navigationTitle(title)
    }
}

方案2：架构优化彻底规避问题

从布局逻辑上调整，把NavigationView移到TabView的外层，统一管理全局导航栈，不需要每个子页面单独嵌套NavigationView，从根源避免嵌套渲染的bug：

struct ContentView: View {
    var body: some View {
        // NavigationView移到外层
        NavigationView {
            TabView {
                SettingsView()
                BlankView(color: .green)
                BlankView(color: .blue)
                BlankView(color: .red)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

// 移除内层的NavigationView
struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("General")) {
                NavigationLink(destination: SettingsItem(title: "1")) {
                    Text("1")
                }
                NavigationLink(destination: SettingsItem(title: "2")) {
                    Text("2")
                }
                NavigationLink(destination: SettingsItem(title: "3")) {
                    Text("3")
                }
                NavigationLink(destination: SettingsItem(title: "4")) {
                    Text("4")
                }
            }
        }
        .listStyle(InsetGroupedListStyle())
        .navigationTitle("Settings")
    }
}

struct SettingsItem: View {
    @State var title = "Title"
    var body: some View {
        List {
            
        }
        .navigationTitle(title)
    }
}

struct BlankView: View {
    let color: Color
    var body: some View {
        ZStack{
            color
            Text("Blank View")
                .padding()
        }
        .border(Color.black, width: 8)
        // 空白页不需要标题可以设置为空
        .navigationTitle("")
    }
}

两种方案都可以解决首次加载标题偏移的问题，方案2的架构更合理，后续不会出现其他导航相关的布局异常。

内容的提问来源于stack exchange，提问作者Mr Duck