Swift iOS中ForEach结合NavigationLink无法跳转视图的解决方法

问题根源 #

1. NavigationLink被Button拦截：原代码将NavigationLink嵌套在空的Button内部，SwiftUI中Button的点击优先级更高，点击时只会触发Button的空action，无法触发NavigationLink的跳转逻辑。
2. 拼写错误导致视图匹配失败：MockData中第二个Item的name写为"Illnes"，但selectedView中判断的是"Illness"，导致该选项无法跳转到目标视图。

修复方案 #

1. 移除多余Button，让NavigationLink直接作为可点击容器

将NavigationLink移到外层，包裹整个可点击的ZStack内容，确保点击事件直接触发跳转。

2. 修正MockData中的拼写错误

把Item(name: "Illnes")改为Item(name: "Illness")，保证视图匹配逻辑正常工作。

修复后的完整代码 #

NavigationView(){
    ZStack(){
        Color(.systemGray6).ignoresSafeArea()
        
        VStack()
        {
            ScrollView(.horizontal, showsIndicators: false)
            {
                HStack()
                {
                    ForEach(MockData.items)
                    { item in
                        // 直接用NavigationLink包裹可点击内容
                        NavigationLink(destination: selectedView(name: item.name)) {
                            ZStack
                            {
                                RoundedRectangle(cornerRadius: 10)
                                    .foregroundStyle(item.color)
                                    .frame(width: 70, height: 70)
                                
                                Image(systemName: item.image)
                                    .foregroundColor(.white)
                                    .font(.system(size: 30))
                            }
                        }
                    }
                }
                .padding(.top, 20)
                .padding(.leading)
            }
            Spacer()
        }
    }
    .navigationTitle("Caracteristicas")
    .toolbar{
        ToolbarItem(placement: .navigationBarLeading)
        {
            Button(action:{},
                   label: {
                Image(systemName: "switch.2")})
        }
        
        ToolbarItem(placement: .navigationBarTrailing)
        {
            Button(action:{},
                   label: {Image(systemName: "person.circle")})
        }
    }
    .accentColor(.red)
}

struct Item: Identifiable, Hashable {
    var id = UUID()
    var name: String
    var color: Color
    var image: String
}

@ViewBuilder
private func selectedView (name: String) -> some View {
    switch name {
    case "Medical": MedicalView()
    case "Illness": IllnessView()
    case "Vaccune": VaccuneView()
    case "Dewor":  DeworView()
    case "Allergie": AllergieView()
    default: EmptyView()
    }
}

struct MockData {
    static var items = [
        Item(name: "Medical" ,color: .red, image:"heart"),
        Item(name: "Illness" ,color: .blue, image:"pill"), // 修正拼写错误
        Item(name:"Vaccune" ,color: .orange, image: "syringe"),
        Item(name: "Dewor" ,color: .green, image: "microbe"),
        Item(name: "Allergie" ,color:.purple, image: "allergens")
    ]
}

// 示例目标视图（实际项目中需自行实现）
struct MedicalView: View { var body: some View { Text("Medical View") } }
struct IllnessView: View { var body: some View { Text("Illness View") } }
struct VaccuneView: View { var body: some View { Text("Vaccune View") } }
struct DeworView: View { var body: some View { Text("Dewor View") } }
struct AllergieView: View { var body: some View { Text("Allergie View") } }

额外说明 #

如果需要在点击时添加额外逻辑（比如统计埋点），可以给NavigationLink添加onTapGesture：

NavigationLink(destination: selectedView(name: item.name)) {
    // 可点击内容
}
.onTapGesture {
    // 这里添加额外点击逻辑
}

内容的提问来源于stack exchange，提问作者Javier Ramos Lopez