How do I click on the items inside the list section with scrollview to navigate to detail page SwiftUI

Question

There is a list in which there are sections and each section contains items, put inside a horizontal scrollview, when trying to navigate to detail page using NavigationLink all the items get selected, I want to select individual item to navigate to detail page. Here is my code. When i tap on the list it opens multiple times. I want the only selected item to be opened

let menu = Bundle.main.decode([ItemSection].self, from: "abc.json")
var body: some View {
   List(menu) { sections in
       VStack(alignment: .leading){
           Text(sections.name)
           HStack{
               ScrollView(.horizontal, showsIndicators: false) {
                   Section {
                       HStack{
                           ForEach(sections.items){ allItems in
                               NavigationLink(destination: DetailView()){
                                   ItemsTab(item: allItems)
                               }
                           }
                       }
                   }
               }
           }
       }
   }
}

struct ItemTab: View {

var items: Items
var body: some View {
    VStack{
        Image("name")
            .resizable()
        .cornerRadius(3)
            .frame(width: 180, height: 180)
        Text(items.name)
              .foregroundColor( Color(red: 0 / 255, green: 38 / 255, blue: 107 / 255))
            .font(.headline)
    }
    .padding(.top)
    .padding(.bottom)
    .padding(.leading, 5)
    .padding(.trailing,5)
}

} The image show the output of the above code, it has list with section and each section has horizontal scroll, i want to select items individually

hard to repeat after you with only this part of code. can you give some more code, please? — Александр Грабовский

Pavel Lint Pavel Lint · Accepted Answer · 2019-11-10T21:34:12

I have reproduced your code locally, and I believe you miss NavigationView from your list view. Be sure to wrap the list into NavigationView like this:

NavigationView { // <-- Be sure to add this
  List(menu) { sections in
     VStack {
         /*...*/
     }
  }
}

How do I click on the items inside the list section with scrollview to navigate to detail page SwiftUI

1 Answers