SwiftUI中如何从地图视图的水平列表跳转至详情视图？

核心问题 #

你的代码里没有将视图层级包裹在NavigationView中，这是SwiftUI中NavigationLink能正常工作的必要条件。另外，用EmptyView作为NavigationLink的内容会导致点击区域不可靠，因为EmptyView本身没有尺寸，即使设置了opacity为0，也很难稳定触发点击。

修正方案 #

方案1：将列表项直接作为NavigationLink的内容 #

把HListContentView放到NavigationLink的label位置，这样整个列表项区域都能响应点击，同时确保外层有NavigationView：

NavigationView { // 必须添加这个容器
    ScrollView(.horizontal) {
        LazyHStack {
            ForEach(0...10, id: \.self) { index in
                NavigationLink(destination: DetailsView()) {
                    HListContentView(descriptionLineLimit: 3)
                        .background(.white)
                        .cornerRadius(8)
                        .frame(width: geometry.size.width - 20, height: 200)
                        .onAppear {
                            print("map view: \(index)")
                        }
                        .shadow(color: .gray, radius: 10, x: 0.1, y: 0.1)
                }
                .buttonStyle(PlainButtonStyle()) // 去除默认的NavigationLink样式
            }
        }
    }
}

方案2：保持ZStack结构，调整NavigationLink的点击区域 #

如果一定要用ZStack的方式，需要给NavigationLink的内容添加和列表项一致的尺寸，确保点击区域覆盖整个列表项：

NavigationView { // 必须添加这个容器
    ScrollView(.horizontal) {
        LazyHStack {
            ForEach(0...10, id: \.self) { index in
                ZStack {
                    HListContentView(descriptionLineLimit: 3)
                        .background(.white)
                        .cornerRadius(8)
                        .frame(width: geometry.size.width - 20, height: 200)
                        .onAppear {
                            print("map view: \(index)")
                        }
                        .shadow(color: .gray, radius: 10, x: 0.1, y: 0.1)
                    
                    NavigationLink(destination: DetailsView()) {
                        Color.clear // 用透明颜色填充，确保点击区域和列表项一致
                            .frame(width: geometry.size.width - 20, height: 200)
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
        }
    }
}

关键注意点 #

• 所有需要使用NavigationLink的视图必须嵌套在NavigationView（iOS 16+也可以用NavigationStack）内部，否则跳转逻辑不会触发。
• 避免用EmptyView作为NavigationLink的内容，因为它没有布局尺寸，无法稳定响应点击事件，改用Color.clear或者直接将目标视图作为label是更可靠的方式。

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