如何通过点击 ForEach 中的按钮导航到不同的屏幕/视图

Question

I have created a dashboard with 9 buttons laid out on a lazyVGrid and a ForEach loop to display the various buttons.

(Click to expand)

Now, I want to navigate to various new screens based on the button pressed. Someone, please help me achieve this.

LazyVGrid(columns: row, spacing: 25) {
                
              
                ForEach(Dashboard_Data) { data in
                    
                    Button(action: {
                                             
                            // action
                        }) {
                            
                        ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
                            
                            VStack(alignment: .leading, spacing: 5) {
                                
                                Spacer(minLength: 0)

                                Text(data.data)
                                    .font(.title)
                                    .fontWeight(.bold)
                                    .foregroundColor(.white)
                                
                                HStack{
                                    Spacer(minLength: 0)
                                    Text(data.suggest)
                                        .font(.system(size: 17, weight: .regular))
                                        .lineLimit(2)
                                        .foregroundColor(.white)
                                        
                                }
                            }.padding()
                            .background(Color(data.image))
                            .cornerRadius(20)
                            .shadow(color: Color.black.opacity(0.5), radius: 5, x: 0, y: 5)
                            
                            Image(data.imageIcon)
                                .renderingMode(.template)
                                .foregroundColor(.white)
                                .font(.system(size: 25, weight: .regular))
                                .padding(10)
                                .background(Color.white.opacity(0.15))
                                .clipShape(Circle())
                        }
                        
                      
                    }
                }
                
            }

Answer 1

    var body: some View{
            LazyVGrid(columns: row, spacing: 25) {
                ForEach(Dashboard_Data) { data in
                    NavigationLink(destination: getTheDestination(data)) {
                        //label/design of your button
                    }
                }
            }
        }
        
        private func getTheDestination(data:<put ur dataType of Dashboard_Data> ) -> some View {
            // add some input parameter in this func to get data/informattion from your Dashboard_Data
            // according to ur data return the destination view
if data.data == "your value" {
return Text( _ data.data)
}
           return Text("Destination")
        }