Search code examples
swiftuixcode11tabview

Receive the selected TabView from another view - SwiftUI


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


Solution

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

    Tested with Xcode 12 / iOS 14

    demo

    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)
            }
        }
    }