SwiftUI中如何实现TabBar与Toolbar的切换？

核心思路 #

通过一个布尔状态变量控制当前显示TabBar还是底部Toolbar，点击按钮切换状态后，SwiftUI会自动更新界面渲染对应的组件。

方案一：分视图切换（兼容全版本iOS） #

这种方式通过条件渲染不同的视图结构，适合需要在两种模式下展示不同内容的场景：

struct TabBarView: View {
    // 控制显示状态：true显示TabBar，false显示Toolbar
    @State private var isShowingTabBar = true
    
    var body: some View {
        if isShowingTabBar {
            // TabBar模式
            TabView {
                ContentView()
                    .tabItem {
                        Image(systemName: "paperplane.fill")
                        Text("TabBar")
                    }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Select") {
                        isShowingTabBar.toggle()
                    }
                }
            }
            .navigationTitle("TabBar模式")
        } else {
            // Toolbar模式
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("toolBar1") {
                            // 这里添加按钮点击逻辑
                        }
                    }
                    ToolbarItem(placement: .bottomBar) {
                        Button("toolBar2") {
                            // 这里添加按钮点击逻辑
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Back") {
                            isShowingTabBar.toggle()
                        }
                    }
                }
                .navigationTitle("Toolbar模式")
                .navigationBarBackButtonHidden(true)
        }
    }
}

// 示例内容视图
struct ContentView: View {
    var body: some View {
        Text("主内容区域")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)
    }
}

方案二：控制组件显隐（iOS 16+） #

如果你的App只需要适配iOS 16及以上版本，可以用tabBarHidden修饰符直接控制TabBar的显示/隐藏，同时条件渲染Toolbar，代码更简洁：

struct TabBarView: View {
    @State private var isShowingTabBar = true
    
    var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Image(systemName: "paperplane.fill")
                    Text("TabBar")
                }
        }
        // 根据状态隐藏/显示TabBar
        .tabBarHidden(!isShowingTabBar)
        .toolbar {
            // 只在非TabBar模式下显示底部Toolbar
            if !isShowingTabBar {
                ToolbarItem(placement: .bottomBar) {
                    Button("toolBar1") {}
                }
                ToolbarItem(placement: .bottomBar) {
                    Button("toolBar2") {}
                }
            }
            // 切换按钮
            ToolbarItem(placement: .navigationBarTrailing) {
                Button(isShowingTabBar ? "Select" : "Back") {
                    isShowingTabBar.toggle()
                }
            }
        }
        .navigationTitle(isShowingTabBar ? "TabBar模式" : "Toolbar模式")
    }
}

关键说明 #

• 遵循Swift命名规范：结构体名首字母大写（原代码的tabBar改为TabBarView）
• 状态变量isShowingTabBar是私有变量，只用于当前视图的状态管理
• 两种方案都支持双向切换，点击按钮即可在TabBar和Toolbar模式之间切换

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