Receive the selected TabView from another view - SwiftUI

Question

I'm trying do make a swiftui app with tabView. I want the tabview works normally but also the selected tab may come from the first page The first view

struct ContentView: View {
       @State  var selectedTab = 0

       var body: some View {
           VStack{
               NavigationView{
                   VStack(alignment: .center, spacing: 0){
                       Spacer()
                       NavigationLink(destination: AccueilView(selectedTab: self.$selectedTab)){
                           VStack{
                               Image(systemName: "book")
                               Text("Enseignements")
                           }
                        }
                       HStack{
                           NavigationLink(destination: AccueilView(selectedTab: self.$selectedTab)){
                               VStack{
                                   Image(systemName: "list.dash")
                                   Text("Étapes")
                               }
                           }
                           Image(systemName: "map")
                               .resizable()
                               .frame(width: 150, height: 150, alignment: .center)
                           NavigationLink(destination: AccueilView(selectedTab: self.$selectedTab)){
                               VStack{
                                   Image(systemName: "photo.on.rectangle")
                                   Text("Album")
                               }
                           }
                       }
                       NavigationLink(destination: AccueilView(selectedTab: self.$selectedTab)){
                           VStack{
                               Image(systemName: "square.stack.3d.down.right")
                               Text("Chroniques")
                           }
                       }
                       Spacer()
                       
                   }
                   .edgesIgnoringSafeArea(.bottom)
                   
                       
               }
           }
        }
}

The second view

struct AccueilView: View {
    @Binding  var selectedTab: Int
     
     var body: some View {
         TabView(selection: $selectedTab) {
             EtapeView(card: Card.example)
                 .tabItem {
                     Image(systemName: "list.dash")
                     Text("Étapes")
             }
             .tag(0)
             AlbumView()
                 .tabItem {
                     Image(systemName: "photo.on.rectangle")
                     Text("Album")
             }
             .tag(1)
             TeachingView(card: Card.example)
                 .tabItem{
                     Image(systemName: "book")
                     Text("Enseignements")
             }
             .tag(2)
             ChronicView(card: Card.example)
                 .tabItem{
                     Image(systemName: "square.stack.3d.down.right")
                     Text("Chroniques")
             }.tag(3)
         }
     }
}

And I want the ContentView pass the selectedTab to the AccueilView, while the AccueilView don't change the tabView normal state. Eg : if i click on "Album" in ContenView I go directly in Album in AccueilView and etc and from Album i can go to chronique for example. Thank u for the help

Asperi · Accepted Answer · 2020-07-24 14:44:41Z

1

If I correctly understood your goal, here is possible approach.

Tested with Xcode 12 / iOS 14

Modified code:

struct TestNavigateToTab: View {
    var body: some View {
        VStack{
            NavigationView{
                VStack(alignment: .center, spacing: 0){
                    Spacer()
                    NavigationLink(destination: AccueilView(selectedTab: 2)){
                        VStack{
                            Image(systemName: "book")
                            Text("Enseignements")
                        }
                    }
                    HStack{
                        NavigationLink(destination: AccueilView(selectedTab: 0)){
                            VStack{
                                Image(systemName: "list.dash")
                                Text("Étapes")
                            }
                        }
                        Image(systemName: "map")
                            .resizable()
                            .frame(width: 150, height: 150, alignment: .center)
                        NavigationLink(destination: AccueilView(selectedTab: 1)){
                            VStack{
                                Image(systemName: "photo.on.rectangle")
                                Text("Album")
                            }
                        }
                    }
                    NavigationLink(destination: AccueilView(selectedTab: 3)){
                        VStack{
                            Image(systemName: "square.stack.3d.down.right")
                            Text("Chroniques")
                        }
                    }
                    Spacer()
                    
                }
                .edgesIgnoringSafeArea(.bottom)
            }
        }
    }
}

struct AccueilView: View {
    @State var selectedTab: Int
    
    init(selectedTab: Int) {
        _selectedTab = State(initialValue: selectedTab)
    }
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Text("EtapeView")
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Étapes")
            }
            .tag(0)
            Text("AlbumView")
                .tabItem {
                    Image(systemName: "photo.on.rectangle")
                    Text("Album")
            }
            .tag(1)
            Text("TeachingView")
                .tabItem{
                    Image(systemName: "book")
                    Text("Enseignements")
            }
            .tag(2)
            Text("ChronicView")
                .tabItem{
                    Image(systemName: "square.stack.3d.down.right")
                    Text("Chroniques")
            }.tag(3)
        }
    }
}

edited Jul 24, 2020 at 14:44

answered Jul 24, 2020 at 13:40

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sokina Over a year ago

Yess that's exactly what I wanted thanks. I try your solution, but once in the AccueilView if I try to go to other tabItem they show blank screen and it's not suppose to do that.

Asperi Over a year ago

See updated with backward compatible solution. Tested with Xcode 11.4 / iOS 13.4. Also I would recommend to add enum with explicit cases instead of Int tags.

Sokina Over a year ago

Hi @Asperi . App crashes now if I try to go back to testNavigationToTab using back button I think it's a navigationView issue. Any idea ?? PS: I'm using now xcode 12 and ios 13

Collectives™ on Stack Overflow

Receive the selected TabView from another view - SwiftUI

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related