SwiftUI如何在TabView上方统一添加顶部栏？

完全可以实现你的需求，只需要将顶部栏放在TabView所在的VStack容器中，就能让所有Tab页面共享这个统一的顶部栏，同时底部TabBar的位置保持不变。

修改后的代码示例 #

首先定义你的顶部栏视图（可根据实际需求调整样式和功能）：

struct TopBar: View {
    // 绑定选中的Tab，用于动态调整顶部栏内容
    @Binding var selectedTab: TabChoice
    
    var body: some View {
        HStack {
            // 动态显示当前Tab的标题
            Text(getTabTitle(for: selectedTab))
                .font(.headline)
                .bold()
            
            Spacer()
            
            // 根据不同Tab显示专属操作按钮
            if selectedTab == .calculate {
                Button(action: {
                    // 计算页专属操作逻辑
                }) {
                    Image(systemName: "plus.circle.fill")
                        .foregroundColor(.blue)
                }
            } else {
                Button(action: {
                    // 通用操作逻辑
                }) {
                    Image(systemName: "bell.fill")
                        .foregroundColor(.gray)
                }
            }
        }
        .padding(.horizontal)
        .padding(.vertical, 12)
        .background(Color(UIColor.systemGray6))
        .border(Color(UIColor.systemGray4), edge: .bottom)
    }
    
    // 根据Tab枚举返回对应标题
    private func getTabTitle(for tab: TabChoice) -> String {
        switch tab {
        case .location: return "位置"
        case .calculate: return "计算"
        case .install: return "安装"
        case .results: return "结果"
        case .about: return "关于"
        }
    }
}

然后调整主视图的结构，将顶部栏加入TabView所在的VStack：

var body: some View {
    VStack(spacing: 0) { // 取消间距，让顶部栏与TabView无缝衔接
        // 统一的顶部栏，传入选中Tab的绑定
        TopBar(selectedTab: $tabs.selectedTab)
        
        TabView(selection: $tabs.selectedTab) {
            LocationView()
                .tabItem {
                    Label("位置", systemImage: "globe.europe.africa")
                }
                .tag(TabChoice.location)
            
            CalculateView()
                .tabItem {
                    Label("计算", systemImage: "apps.ipad")
                }
                .tag(TabChoice.calculate)
            
            InstallView()
                .tabItem {
                    Label("安装", systemImage: "window.ceiling.closed")
                }
                .tag(TabChoice.install)
            
            ResultsView()
                .tabItem {
                    Label("结果", systemImage: "sun.max.fill")
                }
                .tag(TabChoice.results)
            
            AboutView()
                .tabItem {
                    Label("关于", systemImage: "gear")
                }
                .tag(TabChoice.about)
        }
    }
}

核心说明 #

• 顶部栏与TabView同属一个VStack，因此会固定在TabView上方，所有Tab页面切换时都会显示该顶部栏，无需在每个子视图中重复编写代码。
• 通过绑定selectedTab，可以让顶部栏内容随当前选中的Tab动态变化，满足不同页面的个性化需求。
• 设置VStack的spacing: 0可以消除顶部栏与TabView之间的多余间隙，视觉上更连贯。

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