How to make switch case button in swiftUI with action and title

Question

I want to make a button list with different actions in the switch case method in swiftUI.

    struct dashboard: View{
        var categoriesText = ["My Orders", "Payments", "Settings", "Password"]
        var categoriesImage = ["wallet.pass", "trophy", "gearshape", "lock.circle"]
        
        var body: some View{
            VStack{
                ForEach(0..<categoriesImage.count) { i in
                    VStack{
                        NavigationLink {
                            SettingView()
                                .navigationBarHidden(true)
                            
                        } label: {
                            HStack{
                                HStack{
                                    Image(systemName: categoriesImage[i])
                                        .resizable()
                                        .frame(minWidth: 30 ,maxWidth: 30, minHeight: 30, maxHeight: 35)
                                        .padding(15)
                                        .foregroundColor(.white)
                                        .background(){
                                            Rectangle()
                                                .foregroundColor(.orange)
                                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                                .cornerRadius(50)
                                        }
                                        .padding(.horizontal,10)
                                    
                                    VStack{
                                        Text(categoriesText[i])
                                            .font(.system(size: 20))
                                            .bold()
                                            .foregroundColor(.black)
                                            .frame(maxWidth: .infinity, maxHeight: 40, alignment: .leading)
                                    }
                                    
                                    Image(systemName: "chevron.right")
                                        .resizable()
                                        .frame(maxWidth: 15, maxHeight: 20)
                                        .bold()
                                        .foregroundColor(.gray)
                                }
                                .padding(.horizontal, 30)
                                .padding(.vertical, 10)
                            }
                        }
                    }
                }
            }
        }
    }

In above code the buttons are in loop but i want these buttons in switch case with different actions so i will navigate each button to another pages

Answer 1

This implements two switches: one for your NavigationLink, and one for your Text (you had the image names on the buttons instead of descriptions of the NavigationLink.)

The code assumes you have separate views for each button. You can change the names to fit what you're doing; I just based the view names on your categoriesText array.

I hope this answers your question.

struct Dashboard: View {
    let categoriesText = ["My Orders", "Payments", "Settings", "Password"]
    let categoriesImage = ["wallet.pass", "trophy", "gearshape", "lock.circle"]
    var body: some View {
        VStack {
            ForEach(categoriesImage, id: \.self) { image in
                Button(action: {}) {
                    VStack{
                        NavigationLink {
                            switch image {
                            case "wallet.pass":
                                OrdersView()
                            case "trophy":
                                PaymentsView()
                            case "gearshape":
                                SettingsView()
                            case "lock.circle":
                                PasswordView()
                            }
                        } label: {
                            VStack {
                                HStack {
                                    Image(systemName: image)
                                        .resizable()
                                        .frame(minWidth: 30 ,maxWidth: 30, minHeight: 30, maxHeight: 35)
                                        .padding(15)
                                        .foregroundColor(.white)
                                        .background(){
                                            Rectangle()
                                                .foregroundColor(.orange)
                                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                                .cornerRadius(50)
                                        }
                                        .padding(.horizontal,10)
                                    
                                    VStack{
                                        switch image {
                                        case "wallet.pass":
                                            Text(categoriesText[0])
                                                .font(.system(size: 20))
                                                .bold()
                                                .foregroundColor(.black)
                                                .frame(maxWidth: .infinity, maxHeight: 40, alignment: .leading)
                                        case "trophy":
                                            Text(categoriesText[1])
                                                .font(.system(size: 20))
                                                .bold()
                                                .foregroundColor(.black)
                                                .frame(maxWidth: .infinity, maxHeight: 40, alignment: .leading)
                                        case "gearshape":
                                            Text(categoriesText[2])
                                                .font(.system(size: 20))
                                                .bold()
                                                .foregroundColor(.black)
                                                .frame(maxWidth: .infinity, maxHeight: 40, alignment: .leading)
                                        case "lock.circle":
                                            Text(categoriesText[3])
                                                .font(.system(size: 20))
                                                .bold()
                                                .foregroundColor(.black)
                                                .frame(maxWidth: .infinity, maxHeight: 40, alignment: .leading)
                                        default:
                                            Text("Unknown")
                                        }
                                                                                }
                                    
                                    Image(systemName: "chevron.right")
                                        .resizable()
                                        .frame(maxWidth: 15, maxHeight: 20)
                                        .bold()
                                        .foregroundColor(.gray)
                                }
                                .padding(.horizontal, 30)
                                .padding(.vertical, 10)
                            }
                        }
                    }
                }
            }
        }
    }
}