NavigationStack嵌套TabView导致屏幕偏移问题求助

问题原因分析 #

1. 直接使用UIScreen.main.bounds获取宽高，未考虑NavigationStack中导航栏占据的空间，导致布局计算偏差。
2. 安全区域与导航栏的设置冲突，TabView的滚动交互和NavigationStack的导航栏状态（即使背景隐藏）产生了不必要的布局偏移。
3. 多个安全区域相关修饰符重复使用，造成布局逻辑混乱。

修复后的代码 #

struct FirstView: View {
    @State var isNextView = false
    var body: some View {
        NavigationStack {
            VStack {
                Button {
                    isNextView.toggle()
                } label: {
                    Text("go next page")
                }
            }
            .navigationDestination(isPresented: $isNextView) {
                NextView()
                    .navigationBarBackButtonHidden(true)
            }
        }
    }
}

struct NextView: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        GeometryReader { geo in
            TabView {
                Rectangle()
                    .frame(width: geo.size.width, height: geo.size.height)
                    .foregroundColor(.red)
                
                Rectangle()
                    .frame(width: geo.size.width, height: geo.size.height)
                    .foregroundColor(.blue)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .ignoresSafeArea()
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "chevron.left")
                        .imageScale(.large)
                        .foregroundColor(.black)
                }
            }
        }
        .toolbar(.hidden, for: .navigationBar) // 完全隐藏导航栏，包括占位空间
    }
}

关键修复点 #

• 替换UIScreen为GeometryReader：通过GeometryReader获取当前视图的可用宽高，自动适配NavigationStack中的布局空间，避免硬编码屏幕尺寸带来的偏移。
• 简化安全区域设置：只保留ignoresSafeArea()让TabView占满整个可用空间，移除重复的edgesIgnoringSafeArea、safeAreaPadding等修饰符，避免布局冲突。
• 完全隐藏导航栏：使用.toolbar(.hidden, for: .navigationBar)替代仅隐藏背景，彻底移除导航栏的占位空间，消除跳转时的Y轴偏移。
• 调整结构层级：将TabView包裹在GeometryReader内，确保布局计算基于当前视图的实际可用区域，而非整个屏幕。

额外优化（若滑动偏移仍存在） #

如果修复后垂直滑动时仍有偏移，可给TabView添加以下修饰符，避免滚动触发导航栏动态调整：

TabView {
    // ... 页面内容
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.ignoresSafeArea()
.scrollDismissesKeyboard(.never)

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