Nav bar with toolbar buttons on a specific tabview item in swift

user_1311831 0
Viewed 168

I have a TabView with three views (triangle, square and circle) nested inside a navigation view and link. TabView works fine. I'd like to have toolbar buttons for only a specific tabview; say circle. The toolbar modifier adds the buttons on all the tabviews.

struct ContentView: View {
  var body: some View {
    NavigationView {
      NavigationLink() {
        TabView {
          Text("triangle")
            .tabItem {
              Label("triangle", systemImage: "triangle")
            }
          
          Text("square")
            .tabItem {
              Label("square", systemImage: "square")
            }
          
          Text("circle")
            .tabItem {
              Label("circle", systemImage: "circle")
            }
        }
        .navigationTitle("Tabs")
        .toolbar {
          ToolbarItemGroup(placement: .navigationBarTrailing) {
            Button("About") {
              print("About tapped!")
            }
  
            Button("Help") {
              print("Help tapped!")
            }
          }
        }
      } label: {
        Text("Hello!")
      }
      .navigationTitle("Title")
    }
  }
}

How can I set this up to only show toolbar buttons on one tabview only?

I suppose a secondary option (way less preferred) may be to disable the buttons on tabviews where they are not needed (if possible).

tabview swiftui toolbar
1 Answers

It can be done with a selection state for TabView and making visibility of specific toolbar buttons depending on that state.

Here is a demo. Tested with Xcode 13.4 / iOS 15.5

demo

struct ContentView: View {
    @State private var selection = 0   // << here !!
    var body: some View {
        NavigationView {
            NavigationLink() {
                TabView(selection: $selection) {     // << here !!
                    Text("triangle")
                        .tabItem {
                            Label("triangle", systemImage: "triangle")
                        }.tag(0)
                    
                    Text("square")
                        .tabItem {
                            Label("square", systemImage: "square")
                        }.tag(1)
                    
                    Text("circle")
                        .tabItem {
                            Label("circle", systemImage: "circle")
                        }.tag(2)
                }
                .navigationTitle("Tabs")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        if selection == 2 {                            // << here !!
                            Button("About") {
                                print("About tapped!")
                            }
                            
                            Button("Help") {
                                print("Help tapped!")
                            }
                        }
                    }
                }
            } label: {
                Text("Hello!")
            }
            .navigationTitle("Title")
        }
    }
}

Test code in GitHub

user_122990300
Related