如何在iOS 18中实现iPad文件App式带首尾按钮的顶部Tab Bar

要实现类似iPad Files应用的顶部Tab栏（两侧带操作按钮），你需要自定义顶部Tab选择组件，配合NavigationStack的Toolbar来整合按钮与Tab栏，而非依赖TabView的默认底部TabBar。以下是完整实现方案：

核心思路 #

• 放弃TabView的默认底部TabBar，改用状态变量控制视图切换
• 将自定义Tab选择栏嵌入NavigationStack的Toolbar中间区域
• 在Toolbar的首尾位置放置操作按钮，与Tab栏形成一体化布局

完整代码实现 #

struct MainView: View {
    // 控制选中Tab的状态变量
    @State private var selectedTab = 0
    // Tab选项配置（名称+系统图标）
    private let tabConfigs = [
        (title: "Home", icon: "house"),
        (title: "Browse", icon: "magnifyingglass"),
        (title: "Profile", icon: "person")
    ]
    
    var body: some View {
        NavigationStack {
            // 根据选中Tab展示对应页面
            Group {
                switch selectedTab {
                case 0:
                    HomeView2()
                case 1:
                    BrowseView()
                default:
                    ProfileView2()
                }
            }
            .toolbar {
                // 左侧操作按钮
                ToolbarItem(placement: .topBarLeading) {
                    Button(action: {
                        // 这里添加左侧按钮的点击逻辑
                    }) {
                        Image(systemName: "plus")
                    }
                }
                
                // 中间自定义Tab栏
                ToolbarItem(placement: .principal) {
                    HStack(spacing: 24) {
                        ForEach(tabConfigs.indices, id: \.self) { index in
                            Button(action: {
                                selectedTab = index
                            }) {
                                VStack(spacing: 4) {
                                    Image(systemName: tabConfigs[index].icon)
                                    Text(tabConfigs[index].title)
                                        .font(.caption)
                                }
                                // 选中/未选中状态区分
                                .foregroundColor(selectedTab == index ? .blue : .secondary)
                                .padding(.vertical, 8)
                            }
                        }
                    }
                }
                
                // 右侧操作按钮
                ToolbarItem(placement: .topBarTrailing) {
                    Button(action: {
                        // 这里添加右侧按钮的点击逻辑
                    }) {
                        Image(systemName: "gear")
                    }
                }
            }
            // 配置导航栏样式，让布局更贴合Files app
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarBackground(Color(.systemBackground), for: .navigationBar)
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

// 替换为你自己的业务视图
struct HomeView2: View {
    var body: some View {
        Text("Home Page")
            .font(.title)
    }
}

struct BrowseView: View {
    var body: some View {
        Text("Browse Page")
            .font(.title)
    }
}

struct ProfileView2: View {
    var body: some View {
        Text("Profile Page")
            .font(.title)
    }
}

关键细节说明 #

1. 自定义Tab栏：通过ToolbarItem(placement: .principal)将Tab组件固定在导航栏中间，用HStack横向排列选项，点击时更新状态变量切换视图。
2. 状态样式区分：通过文字/图标颜色区分选中与未选中的Tab，你还可以给选中Tab添加底部下划线，进一步贴近Files app的视觉效果。
3. Toolbar布局适配：利用.topBarLeading和.topBarTrailing占位符，将操作按钮精准放在Tab栏的首尾两侧，形成一体化的顶部导航区域。

可选优化 #

• 添加Tab切换动画：给视图切换添加withAnimation或transition，提升交互流畅度
• 适配不同尺寸：调整Tab栏的间距、字体大小，保证在iPad横竖屏都有良好显示效果
• 增强选中反馈：给选中Tab添加下划线、缩放等视觉效果，强化交互感知

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