Kiran Jasvanee
Kiran Jasvanee

Reputation: 6564

Way to get selected tab index from TabView in SwiftUI

I've just added TabView, which is working fine, but I unable to fetch the selected tab index out if it.
I think I've kept my code perfectly fine, not sure what's wrong.

struct DefaultTabbar: View {
    
    @State private var selectedItem = 1
    
    var body: some View {
        TabView(selection: $selectedItem) {
            FirstView()
                .tabItem{
                    Image(systemName: "house")
                    Text("First Tab")
            }
            .tag(1)
            
            SecondView()
                .tabItem{
                    Image(systemName: "photo")
                    Text("Second Tab")
            }
            .tag(2)
        }
        .accentColor(.orange)
        .onTapGesture {
            print("selected tab: \(self.selectedItem)")
        }
    }
}

I'm receiving only 0 while switching tabs.
selected tab: 0.
selected tab: 0.

Upvotes: 12

Views: 12898

Answers (2)

Jack
Jack

Reputation: 2344

I think you have the right idea, but don't use onTapGesture, instead use OnChange():

struct DefaultTabbar: View {

    @State private var selectedItem = 1

    var body: some View {
        TabView(selection: $selectedItem) {
            FirstView()
                .tabItem{
                    Image(systemName: "house")
                    Text("First Tab")
            }
            .tag(1)

            SecondView()
                .tabItem{
                    Image(systemName: "photo")
                    Text("Second Tab")
            }
            .tag(2)
        }
        .accentColor(.orange)
        .onChange(of: selectedItem) { value in print("selected tab = \(value)") }
    }
}

Upvotes: 13

Slava Stepanov
Slava Stepanov

Reputation: 61

You can use onAppear method for each tab. It's looks ugly but it's works.

struct DefaultTabbar: View {

    var lastSelectedTab = 0 {
        didSet {
            
        }
    }
    @State private var selectedItem = 1

    var body: some View {
        TabView(selection: $selectedItem) {
            FirstView()
                .onAppear(perform: {
                    lastSelectedTab = 0
                })
                .tabItem{
                    Image(systemName: "house")
                    Text("First Tab")
            }
            .tag(1)

            SecondView()
                .onAppear(perform: {
                    lastSelectedTab = 1
                })
                .tabItem{
                    Image(systemName: "photo")
                    Text("Second Tab")
            }
            .tag(2)
        }
        .accentColor(.orange)
    }
}

Upvotes: 3

Related Questions