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

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 {
         /*...*/
     }
  }
}