SwiftUI PageTabView嵌套NavigationView首次加载时对齐错误问题

问题原因 #

这是SwiftUI旧版NavigationView搭配PageTabViewStyle时的已知布局bug，首次渲染时没有正确计算导航栏对应的安全区域偏移，页面切换触发视图重绘后布局才恢复正常。

修复方案 #

方案1：兼容iOS 15及更低版本

给外层的PageTabView添加ignoresSafeArea(edges: .top)修饰符，手动修正安全区域计算逻辑即可，修改后的完整代码如下：

struct ContentView: View {    
    var body: some View {
        TabView {
            ForEach(0..<3) { index in
                NavigationView {
                    Color.red
                        .navigationTitle("\(index). Page")
                }
                .navigationViewStyle(StackNavigationViewStyle())
            }
        }
        .tabViewStyle(.page)
        // 新增这行修复布局
        .ignoresSafeArea(edges: .top)
    }
}

方案2：iOS 16+ 最优解

直接用系统推荐的NavigationStack替换废弃的NavigationView，即可原生规避这个布局bug，代码如下：

struct ContentView: View {    
    var body: some View {
        TabView {
            ForEach(0..<3) { index in
                NavigationStack {
                    Color.red
                        .navigationTitle("\(index). Page")
                }
            }
        }
        .tabViewStyle(.page)
    }
}

补充说明 #

你提到的外层嵌套普通TabView的场景，以上两种修复方案同样适用，不会对外层TabView的布局产生影响。

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