1

I want to nagivate to the details screen using button. the buttons are designed in a separate view and called Using ForEach function. Please guide me to solve this.

This is the code I designed for button

struct ButtonsDesignView: View {

var buttons: MyModel.buttons
var body: some View {

        Button(action: { }) {
        ZStack {
            HStack{
                VStack{
            Text(btn.title)
                .foregroundColor(Color(.blue))
                .padding()
            
          Text(btn.subtitle)
                .foregroundColor(Color(.blue))
            .padding()
                }
                Spacer()
                VStack{
                    Image(systemName: (btn.image))
                        .resizable()
                        .scaledToFit()
                        .foregroundColor(Color(.blue))
                        .padding()
                        
                        
                }
            }
        }
    }

This is code code I've place in ContentView to call display the buttons in scrollview Using ForEach.

ScrollView(.vertical, showsIndicators: false)
                    {
                  ForEach(buttonsData) {
                item in
                        NavigationLink(destination: DetailView(buttons: item))
                    {
                            ButtonsDesignView(buttons: item)
                            .padding(10)
                            
                    }
        }.padding(.horizontal, 30)
        
            }

But with this code navigation link is not working.

2
  • Does this answer your question stackoverflow.com/a/65057669/12299030? Commented Feb 5, 2021 at 6:12
  • Sorry, no :( I'm trying to find a way to implement the navigation function in button(action : ) Commented Feb 5, 2021 at 6:16

1 Answer 1

0

You should add navigationLink to ButtonDesignView. I think that this should work;

NavigationLink(destination: DetailView(buttons: buttons)) {
    Button(action: { }) {
           ZStack {
               HStack{
                   VStack{
               Text(btn.title)
                   .foregroundColor(Color(.blue))
                   .padding()
               
             Text(btn.subtitle)
                   .foregroundColor(Color(.blue))
               .padding()
                   }
                   Spacer()
                   VStack{
                       Image(systemName: (btn.image))
                           .resizable()
                           .scaledToFit()
                           .foregroundColor(Color(.blue))
                           .padding()
                           
                           
                   }
               }
           }
        }
    }
Sign up to request clarification or add additional context in comments.

1 Comment

I put the NavigationLink on top of ZStack, and it worked. thank you soo much :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.