Question

有一个列表，其中有多个部分，每个部分包含项目，将其放置在水平滚动视图中，当尝试使用NavigationLink导航到详细信息页面时，所有项目均被选中，我想选择单个项目以导航至详细信息页面。这是我的代码。当我点击列表时，它会打开多次。我要打开唯一选中的项目

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

Answer 1

我已经在本地复制了您的代码，并且我相信您会从列表视图中错过NavigationView。确保将列表像这样包装到NavigationView中：

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

如何使用滚动视图单击列表部分中的项目以导航到详细信息页面SwiftUI

1 个答案: