SwiftUI中使用.page样式TabBar时NavigationBar异常问题

问题场景 #

使用SwiftUI的NavigationStack配合TabView时，未设置.tabViewStyle(.page)前功能正常：

正常状态代码 #

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        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)后，NavigationBar无法占据完整高度，且页面文本被导航栏遮挡：

异常状态代码 #

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        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)
    }
}

异常状态截图：

问题原因 #

当TabView启用.page样式后，其默认布局行为会让子视图忽略顶部安全区域，导致NavigationStack无法正确计算导航栏所需的完整高度，同时ScrollView的内容会向上偏移，最终出现导航栏高度不足、内容被遮挡的问题。

解决方案 #

方案1：限制TabView仅忽略底部安全区 #

给TabView添加.ignoresSafeArea(edges: .bottom)，只让分页指示器占用底部安全区，保留顶部安全区给导航栏使用：

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        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)
        .ignoresSafeArea(edges: .bottom) // 仅忽略底部安全区
    }
}

方案2：强制NavigationStack保留安全区 #

给NavigationStack添加.ignoresSafeArea(edges: [])，覆盖TabView的默认安全区忽略行为：

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationStack {
                ScrollView {
                    Text("Home Screen")
                }
                .navigationTitle("Home")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar(.visible, for: .navigationBar)
                .toolbarBackground(.visible, for: .navigationBar)
            }
            .ignoresSafeArea(edges: []) // 强制保留所有安全区
            .tabItem {
                Image(systemName: "square")
            }
            .tag(Tab.home)
        }
        .tabViewStyle(.page)
    }
}

额外建议：将导航栏相关修饰符（如navigationTitle、toolbar）应用到NavigationStack内部的根视图（如ScrollView）上，而非内部的文本控件，布局逻辑会更清晰。

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