How to make SwiftUI tab visibility conditional on tab selection?

106 Views Asked by At

I want to use a TabView in SwiftUI that is only visible when certain tabs are selected, because I want to use an alternate UI on some tabs.

I know that .toolbar(.hidden, for: .tabBar) is supposed to do this, but I can't figure out how to make it work. The below example works for a couple of clicks, but then stops changing the visibly of the TabView. What am I missing?

class SharedViewModel: ObservableObject {
    
    @Published var tabSelection = 0
    
    // Create the singleton
    private static var sharedViewModel: SharedViewModel = {
        let viewModel = SharedViewModel()
        return viewModel
    }()
    
    @discardableResult
    class func shared() -> SharedViewModel {
        return sharedViewModel
    }
}

struct View1: View {
    
    var body: some View {
        Text("View1")
    }
}

struct View2: View {
    
    @ObservedObject var sharedViewModel = SharedViewModel.shared()
    
    var body: some View {
        
        VStack {
            Button("Go to view 3") {
                sharedViewModel.tabSelection = 2
            }
            
            Button("Go to view 1") {
                sharedViewModel.tabSelection = 0
            }
        }
    }
}

struct View3: View {
    
    @ObservedObject var sharedViewModel = SharedViewModel.shared()
    
    var body: some View {
        VStack {
            Button("Go to view 2") {
                sharedViewModel.tabSelection = 1
            }
            
            Button("Go to view 1") {
                sharedViewModel.tabSelection = 0
            }
        }
    }
}

struct ContentView: View {
    
    @ObservedObject var sharedViewModel = SharedViewModel.shared()
    
    var body: some View {
    
        NavigationView {
            TabView(selection: $sharedViewModel.tabSelection) {
                
                View1().tabItem {
                    Text("View1")
                }
                .tag(0)
                
                View2().tabItem {
                    Text("View2")
                }
                .tag(1)
                .toolbar(.hidden, for: .tabBar)
                
                View3().tabItem {
                    Text("View3")
                }
                .tag(2)
                .toolbar(.hidden, for: .tabBar)
            }
        }
    }
}

enter image description here

I am using iPhone 14 simulator, iOS 16.1 on Xcode 14.1

0

There are 0 best solutions below