Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to switch between tabBar and toolbar swiftUI?

In the files App after you pressed the Select button the tabBar switch to the toolbar.enter image description here

How can I do this with swiftUI?(Switch between tabBar and toolbar)

struct tabBar: View {
  
    var body: some View {
        TabView {
            ContentView().tabItem {
                Image(systemName: "paperplane.fill")
                Text("tabBar")
            }
        }
        .toolbar {
            ToolbarItem(placement: .bottomBar, content: {
                Button(action: {
                }){
                    Text("toolBar1")
                }
         
            })
            ToolbarItem(placement: .bottomBar, content: {
                
                Button() {
                } label: {
                    Text("toolBar2")
                }
             
            })
        }

    }
}
like image 682
fdvfarzin Avatar asked Jan 27 '26 09:01

fdvfarzin


1 Answers

For iOS 16 and above, you can use the toolbar(_:for:) method to toggle between visible and hidden states. Also, don't forget to wrap the view in a NavigationView, or else, setting the visibility of the bottom toolbar won't work.

import SwiftUI

struct ContentView: View {
    @State var shouldShowTabBar = false

    var body: some View {
        NavigationView {
            TabView {
                Group {
                    Button("Switch Between Tab Bar and Toolbar") {
                        shouldShowTabBar.toggle()
                    }
                    .tabItem {
                        Label("Tab 1", systemImage: "list.dash")
                    }

                    Text("Tab 2")
                        .tabItem {
                            Label("Tab 2", systemImage: "square.and.pencil")
                        }
                }
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button {

                        } label: {
                            Text("Toolbar Button")
                        }
                    }
                }
                .toolbar(shouldShowTabBar ? .visible : .hidden, for: .tabBar)
                .toolbar(shouldShowTabBar ? .hidden : .visible, for: .bottomBar)
            }
        }
    }
}

If you have to support iOS 14 and 15, you can check every item if it should be visible and hide/show them one by one.

import SwiftUI

struct ContentView: View {
    @State var shouldShowTabBar = false

    var body: some View {
        NavigationView {
            TabView {
                Group {
                    Button("Switch Between Tab Bar and Toolbar") {
                        shouldShowTabBar.toggle()
                    }
                    .tabItem {
                        if shouldShowTabBar {
                            Label("Tab 1", systemImage: "list.dash")
                        }
                    }

                    Text("Tab 2")
                        .tabItem {
                            if shouldShowTabBar {
                                Label("Tab 2", systemImage: "square.and.pencil")
                            }
                        }
                }
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        if !shouldShowTabBar {
                            Button {

                            } label: {
                                Text("Toolbar Button")
                            }
                        }
                    }
                }
            }
        }
    }
}
like image 96
Tamás Sengel Avatar answered Jan 29 '26 12:01

Tamás Sengel



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!