SwiftUI：横向ScrollView列表项跳转详情页批量触发问题求助

这个问题我之前也踩过坑——当你在List的行内嵌套横向ScrollView，并且把NavigationLink直接放在ForEach里时，List的行默认交互会和NavigationLink的点击区域冲突，导致整个行内的所有Item都被“误触发”，进而多次打开详情页。下面是具体的解决方案：

问题根源 #

List的每一行默认是可点击的（点击会有高亮反馈），当你把横向ScrollView和多个NavigationLink塞进List行内时，List的行点击事件会被传递给所有子View里的NavigationLink，从而触发多次跳转。

修复步骤&完整代码 #

我们需要做两件核心事情：让List行不再响应点击，确保每个NavigationLink只响应自己Item区域的点击：

// iOS16+ 推荐用NavigationStack，旧版本替换为NavigationView
NavigationStack {
    let menu = Bundle.main.decode([ItemSection].self, from: "abc.json")
    
    List(menu) { section in
        VStack(alignment: .leading) {
            // 分类标题
            Text(section.name)
                .font(.title2)
                .fontWeight(.semibold)
                .padding(.horizontal)
            
            // 横向滚动的Item列表
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 12) {
                    ForEach(section.items) { item in
                        NavigationLink(destination: DetailView(item: item)) {
                            ItemsTab(item: item)
                        }
                        .buttonStyle(PlainButtonStyle()) // 移除默认按钮高亮，只响应Item本身点击
                    }
                }
                .padding(.horizontal)
            }
        }
        .listRowInsets(EdgeInsets()) // 移除List行的默认内边距，避免行点击区域覆盖整个ScrollView
        .listRowSeparator(.hidden) // 可选：隐藏行分隔线，让布局更整洁
    }
    .listStyle(.insetGrouped) // 可选：根据需求调整List样式
    .navigationTitle("Menu")
}

然后修正ItemsTab的参数名（你原来的代码里参数名和传入变量不一致，这里统一成item）：

struct ItemsTab: View {
    var item: Items // 修正参数名，和传入的变量匹配
    
    var body: some View {
        VStack {
            // 建议用Item模型里的图片字段，比如item.imageName，替换固定的"name"
            Image(item.imageName)
                .resizable()
                .cornerRadius(8)
                .frame(width: 180, height: 180)
            
            Text(item.name)
                .foregroundColor(Color(red: 0/255, green: 38/255, blue: 107/255))
                .font(.headline)
                .lineLimit(1) // 防止文字过长换行
        }
        .padding(.vertical, 8)
    }
}

关键修改说明 #

1. .listRowInsets(EdgeInsets())：彻底移除List行的默认内边距，让List行的点击区域不再覆盖整个横向ScrollView，从根源上避免行点击触发所有NavigationLink。
2. .buttonStyle(PlainButtonStyle())：去掉NavigationLink默认的按钮样式，确保只有Item本身的区域（图片+文字）才会响应点击，同时消除不必要的高亮效果。
3. 布局细节优化：增加HStack的间距、给标题和ScrollView加水平内边距，让UI更美观舒适。

额外注意事项 #

• 确保你的Items和ItemSection模型都遵循了Identifiable协议（或者在ForEach里显式指定id: \.id），否则ForEach会报错。
• 如果是iOS15及以下版本，把NavigationStack换成NavigationView即可，其他代码逻辑完全通用。

内容的提问来源于stack exchange，提问作者Piyush