SwiftUI中带NavigationLink的图片无法点击跳转问题排查

问题现象 #

使用SwiftUI开发时，通过LazyVGrid展示从JSON加载的Recipe数据，图片和标题能正常显示，但包裹在NavigationLink中的图片无法点击跳转至RecipeDetailView，且无任何报错。尝试过真机/模拟器运行、改用List组件、移除LazyVGrid等操作，问题依然存在。

相关代码 #

ContentView #

struct ContentView: View {
    @State var recipes: [Recipe] = []

    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns:  [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
                    ForEach(recipes) { recipe in
                        NavigationLink(destination: RecipeDetailView()) {
                            Image(recipe.coverPhoto)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 200, height: 200)
                                .cornerRadius(0)
                                .overlay(
                                    Text(recipe.name)
                                        .font(.custom("Bodoni 72 Book", size: 20))
                                        .foregroundColor(.white)
                                        .shadow(color: .black, radius: 0, x: 1, y: 1)
                                        .padding(.bottom, 10)
                                    , alignment: .bottom
                                )
                                .padding(.bottom,0.5)
                        }
                    }
                }
            }
            .navigationTitle("Recipes")
            .onAppear {
                do {
                    if let fileURL = Bundle.main.url(forResource: "recipes", withExtension: "json") {
                        let data = try Data(contentsOf: fileURL)
                        let decoder = JSONDecoder()
                        decoder.keyDecodingStrategy = .convertFromSnakeCase
                        self.recipes = try decoder.decode([Recipe].self, from: data)
                    } else {
                        print("JSON file not found")
                    }
                } catch {
                    print(error.localizedDescription)
                }
            }
        }
    }
}

Recipe结构体 #

struct Recipe: Codable, Identifiable, Hashable {
    let name: String
    let instructions: String
    let ingredients: [String]
    let garnish: String
    let coverPhoto: String
    var id: UUID {
        return UUID()
    }
}

问题根源 #

核心问题出在Recipe的id实现上：

• 当前id是计算属性，每次访问都会生成一个新的UUID
• ForEach依赖Identifiable协议的id来追踪列表项的身份，频繁变化的id会导致SwiftUI无法正确维护列表项的状态，进而使包裹的NavigationLink失去交互能力
• 同时，Hashable协议的默认实现也会因为动态变化的id出现异常，进一步影响视图更新逻辑

解决方案 #

1. 固定Recipe的id #

将id改为存储属性，确保每个Recipe实例的id唯一且固定：

• 如果你的JSON数据中本身包含唯一标识字段（比如id），直接添加对应的属性并解码
• 如果JSON里没有，在初始化时生成一次UUID并存储：

struct Recipe: Codable, Identifiable, Hashable {
    let id: UUID // 改为存储属性
    let name: String
    let instructions: String
    let ingredients: [String]
    let garnish: String
    let coverPhoto: String
    
    // 如果JSON中没有id字段，添加自定义初始化器生成UUID
    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        name = try container.decode(String.self, forKey: .name)
        instructions = try container.decode(String.self, forKey: .instructions)
        ingredients = try container.decode([String].self, forKey: .ingredients)
        garnish = try container.decode(String.self, forKey: .garnish)
        coverPhoto = try container.decode(String.self, forKey: .coverPhoto)
        id = UUID() // 初始化时仅生成一次
    }
    
    // 手动定义CodingKeys，避免id被解码（如果JSON里没有）
    enum CodingKeys: String, CodingKey {
        case name, instructions, ingredients, garnish, coverPhoto
    }
}

2. 确保点击区域完整（可选） #

如果图片的点击区域仍有问题，可以给图片添加contentShape，明确交互区域：

Image(recipe.coverPhoto)
    .resizable()
    .scaledToFill()
    .frame(width: 200, height: 200)
    .cornerRadius(0)
    .overlay(/* ... */)
    .padding(.bottom,0.5)
    .contentShape(Rectangle()) // 添加这一行，确保整个区域可点击

3. 验证NavigationView层级 #

如果项目支持iOS 16+，建议使用NavigationStack替代NavigationView，更符合新版SwiftUI规范：

// iOS 16+ 替代方案
NavigationStack {
    // 原ScrollView内容
}
.navigationTitle("Recipes")

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