How can I link to multiple views using Foreach. When I have five options with icons. Each option goes to a different link View

Question

JavierR OP

Created Mar ’24

Replies 2

Boosts 0

Participants 2

I have a foreach with five options to link different View how to do it with button or NavigationLink using switch Case.

HStack()

                    {
                        ForEach(MockData.items)
                        { item in
                            
                            
                            
                            ZStack
                            {
                                Button(action: {}) {
                                    
                                    NavigationLink("") {
                                        
                                        switch item {
                                            
                                        case "MedicalView":
                                            MedicalView()
                                       
                                        case "IllnesView":
                                            IllnessView()
                                       
                                        case "VaccuneView":
                                            VaccuneView()
                                         
                                        case  "DeworView":
                                            DeworView()
                                        
                                        case "AllergieView":
                                        AllergieView()
                                         
                                            
                                            
                                        }
                                        
                                        
                                    }
                                    
                                }
                                {
                                    
                                RoundedRectangle(cornerRadius: 10)
                                .foregroundStyle(item.color.self)
                                .frame(width: 70, height: 70)
                                    
                                .disabled(false)
                                }
                                Image(systemName: item.image)
                                    .foregroundColor(.white)
                                    .font(.system(size: 30))
                                
                                   
                                
                                }
                                
                               
                                    
                                   
                                        
                                    
                                   
                                    
                                
                            
                            
                           
                            
                            
                        }//scrollview
                        
                        //opciones
                        
                        
                        
                        
                        
                    }//cierre del VStack
                    
                    .padding(.top, 20)
                    .padding(.leading)
                    Spacer()
                }//cierre Zstack
                
                
                
            } //cierre de Zstack
            .navigationTitle("Caracteristicas")
            
            
            
            
            
            
            .toolbar{
                ToolbarItem(placement: .navigationBarLeading)
                {
                    
                    Button(action:{},
                           label: {
                        
                        
                        Image(systemName: "switch.2")})
                    
                }
                
                ToolbarItem(placement: .navigationBarTrailing)
                {
                    Button(action:{},
                           label: {Image(systemName: "person.circle")})
                }
                
            }//toolBar
            
            
            .accentColor(.red)
            
            
            
            
        }
        
        
        
    }
    
    
}

}

    struct Item: Identifiable {
        
        let id = UUID()
        let color: Color
        let image: String
        
       
    }
            
    struct MockData {
        static var items = [Item(color: .red, image: "heart"),
                            Item(color: .blue, image:"pill"),
                            Item(color: .orange, image: "syringe"),
                            Item(color: .green, image: "microbe"),
                            Item(color:.purple, image: "allergens")]
    }

Boost

Answer 1

Claude31 OP

Apr ’24

Accepted Answer

You should use code formatter tool to present your code properly in the post. It is really a pain to read it unformatted. And remove extra blank lines.

What is the problem and the error you get ?

You should handle a default case with EmptyView
a good way to do it is to use ViewBuilder.

Create a ViewBuilder (I use item.name and not item):

    @ViewBuilder func selectedView(name: String) -> some View {
        switch name {
            case "Medical": MedicalView()
            case "Illnes": IllnesView()
            case "Vaccune": VaccuneView()
            case "Dewor": DeworView()
            case "Allergie": AllergieView()
            default: EmptyView()
        }
    }

And call with:

            Button(action: {     }) {
                NavigationLink(destination: selectedView(name: item.name)) {
                }

So you should change the definition of Item to get the name directly

struct MockData {
    static var items = [Item(name: "Medical", color: .red, image: "heart"),
                        Item(name: "Illnes", color: .blue, image:"pill"),
                        Item(name: "Vaccune", color: .orange, image: "syringe"),
                        Item(name: "Dewor", color: .green, image: "microbe"),
                        Item(name: "Allergie", color:.purple, image: "allergens")]
}

Note that you'd now better use navigationDestination in a navigationStack.

See how here: https://www.hackingwithswift.com/books/ios-swiftui/handling-navigation-the-smart-way-with-navigationdestination

2

Answer 2

JavierR OP

Apr ’24

it doesn't work it doesn't go toView

0