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

Posted 2023-02-23

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

【英文标题】：How do I click on the items inside the list section with scrollview to navigate to detail page SwiftUI

【发布时间】：2019-11-09 12:55:50

【问题描述】：

有一个列表，其中有部分，每个部分都包含项目，放在水平滚动视图中，当尝试使用 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

【问题讨论】：

只有这部分代码很难重复。可以多给点代码吗？

向我们展示 ItemsTab 的代码

用更多代码和信息更新了查询

【参考方案1】：

我已在本地复制了您的代码，我相信您在列表视图中错过了NavigationView。请务必将列表包装成NavigationView，如下所示：

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

【讨论】：

它对我不起作用，当我添加 NavigationView 时导航栏下方有空间。每个列表部分都是水平滚动的，我想点击每个项目以导航到详细信息页面。当我点击列表部分时，我可以导航，但详细信息页面打开多次，这等于该部分中的项目数。我只是希望当我点击单个项目时，它的详细信息页面应该打开而不是其他页面。

我有一个与您的布局有关的工作示例，您要我分享吗？也许你可以测试一下。

是的，我会试试的

在这里，试一试：jmp.sh/sSYOCHV 这个演示项目对我有用。