如何实现点击LazyVGrid中的项切换至另一视图？

要实现点击LazyVGrid中的项跳转视图，核心是结合NavigationStack（iOS 16+）/NavigationView（iOS 15及更早）与NavigationLink，以下是两种实用的实现方式：

方法一：直接用NavigationLink包裹网格项 #

这是最简洁的实现方式，直接将网格项作为NavigationLink的点击区域，指定跳转的目标视图即可：

// 先定义一个目标跳转视图示例
struct ColorDetailView: View {
    let color: Color
    var body: some View {
        ZStack {
            color.gradient
            Text("当前颜色：\(color.description)")
                .foregroundColor(.white)
                .font(.title)
        }
        .navigationTitle("颜色详情")
    }
}

// 修改后的LazyGridView
struct LazyGridView: View {
    let columns = Array(repeating: GridItem(.flexible(minimum: 20)), count: 3)
    
    var body: some View {
        // 必须将整个页面包裹在NavigationStack/NavigationView中
        NavigationStack {
            ScrollView{
                LazyVGrid(columns: columns) {
                    ForEach(MockData.colors, id: \.self) { color in
                        // 用NavigationLink包裹你的网格项
                        NavigationLink(destination: ColorDetailView(color: color)) {
                            RoundedRectangle(cornerRadius: 10)
                                .fill(color.gradient)
                                .frame(height: 110)
                                .contextMenu{
                                    Button("Edit item"){
                                        
                                    }
                                    Button("Delete item"){
                                        
                                    }
                                }
                        }
                    }
                }
                .padding()
            }
            .navigationTitle("颜色网格")
        }
    }
}

// 补充你用到的MockData示例
enum MockData {
    static let colors: [Color] = [.red, .green, .blue, .orange, .purple, .yellow]
}

方法二：onTapGesture配合NavigationLink（适合需额外点击逻辑的场景） #

如果需要在点击时执行额外操作（比如记录日志、更新状态），可以用onTapGesture触发跳转，配合NavigationStack的navigationDestination：

struct LazyGridView: View {
    let columns = Array(repeating: GridItem(.flexible(minimum: 20)), count: 3)
    // 绑定选中的颜色，用于触发跳转
    @State private var selectedColor: Color?
    
    var body: some View {
        NavigationStack {
            ScrollView{
                LazyVGrid(columns: columns) {
                    ForEach(MockData.colors, id: \.self) { color in
                        RoundedRectangle(cornerRadius: 10)
                            .fill(color.gradient)
                            .frame(height: 110)
                            .contextMenu{
                                Button("Edit item"){
                                    
                                }
                                Button("Delete item"){
                                    
                                }
                            }
                            .onTapGesture {
                                // 这里可以添加额外逻辑，比如打印日志
                                print("点击了颜色：\(color)")
                                // 设置选中颜色，触发跳转
                                selectedColor = color
                            }
                    }
                }
                .padding()
            }
            .navigationTitle("颜色网格")
            // 配置跳转目标
            .navigationDestination(item: $selectedColor) { color in
                ColorDetailView(color: color)
            }
        }
    }
}

注意事项 #

• iOS版本适配：iOS 16及以上用NavigationStack，iOS 15及以下用NavigationView（将代码中的NavigationStack替换为NavigationView即可）。
• 目标视图可根据需求自定义，比如传递更多参数、添加业务相关UI元素等。

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