SwiftUI中LazyVGrid内NavigationLink无法执行页面跳转问题求助

我来帮你搞定这个导航不生效的问题～你当前的写法问题出在条件渲染的空NavigationLink没法正确触发跳转——它只是在selectedColor不为空时出现在视图里，但没有和你的点击动作绑定，自然不会触发导航。下面给你两种实用的解决方案，分别适配不同iOS版本：

方案一：iOS 16+ 推荐写法（使用navigationDestination） #

iOS16以后苹果推出了navigationDestination，这种写法更简洁直观，不需要手动管理NavigationLink的显示：

1. 确保你的页面外层包裹着NavigationStack（替代旧版的NavigationView）
2. 在ScrollView的末尾添加navigationDestination，绑定selectedColor变量，当它不为空时自动跳转到详情页
3. 点击卡片时只需要设置selectedColor即可

修改后的完整代码示例：

import SwiftUI

struct YourView: View {
    @State private var selectedColor: ColorData? // 假设你的颜色数据类型是ColorData，需遵循Hashable
    @State private var animation = Namespace()
    let bags: [ColorData] // 你的颜色数据源
    
    var body: some View {
        NavigationStack { // iOS16+用这个，iOS15及以下用NavigationView
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    LazyVGrid(
                        columns: Array(repeating: GridItem(.flexible(), spacing: 15), count: 2),
                        spacing: 15
                    ) {
                        ForEach(bags) { color in
                            ColorView(colorData: color, animation: animation)
                                .onTapGesture {
                                    withAnimation(.easeIn) {
                                        print("pressed")
                                        selectedColor = color
                                    }
                                }
                        }
                    }
                    .padding()
                    .padding(.top, 10)
                }
            }
            // 核心：添加navigationDestination绑定选中状态
            .navigationDestination(item: $selectedColor) { selectedItem in
                DetailView(colorData: selectedItem) // 把选中的颜色数据传给详情页
            }
        }
    }
}

// 注意：你的ColorData结构体需要遵循Hashable协议，示例如下：
struct ColorData: Identifiable, Hashable {
    let id = UUID()
    let image: Color // 假设你用的是Color类型，根据实际情况调整
    // 其他自定义属性...
}

方案二：兼容iOS 15及以下的写法 #

如果需要适配旧版本系统，可以用隐藏的NavigationLink配合状态变量，或者直接把卡片包裹在NavigationLink内部：

方式1：隐藏NavigationLink+状态触发 #

struct YourView: View {
    @State private var selectedColor: ColorData?
    @State private var isNavigating = false // 控制导航激活的状态
    @State private var animation = Namespace()
    let bags: [ColorData]
    
    var body: some View {
        NavigationView { // iOS15及以下用这个
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    LazyVGrid(
                        columns: Array(repeating: GridItem(.flexible(), spacing: 15), count: 2),
                        spacing: 15
                    ) {
                        ForEach(bags) { color in
                            ColorView(colorData: color, animation: animation)
                                .onTapGesture {
                                    withAnimation(.easeIn) {
                                        print("pressed")
                                        selectedColor = color
                                        isNavigating = true // 触发导航
                                    }
                                }
                        }
                    }
                    .padding()
                    .padding(.top, 10)
                    
                    // 隐藏的NavigationLink，通过isActive状态触发
                    NavigationLink(
                        destination: DetailView(colorData: selectedColor!),
                        isActive: $isNavigating
                    ) {
                        EmptyView()
                    }
                    .hidden()
                }
            }
        }
    }
}

方式2：直接用NavigationLink包裹卡片 #

这种写法最直接，把ColorView作为NavigationLink的可点击标签：

LazyVGrid(
    columns: Array(repeating: GridItem(.flexible(), spacing: 15), count: 2),
    spacing: 15
) {
    ForEach(bags) { color in
        NavigationLink(destination: DetailView(colorData: color)) {
            ColorView(colorData: color, animation: animation)
        }
        .onTapGesture {
            withAnimation(.easeIn) {
                print("pressed")
                selectedColor = color // 如果需要记录选中的颜色
            }
        }
    }
}

为什么原来的写法失效？ #

你之前的代码是在selectedColor != nil时渲染一个空的NavigationLink，但这个Link既没有可点击的内容，也没有和触发状态绑定——它只是被动存在于视图中，不会响应你的点击动作，所以自然无法触发导航跳转。

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