SwiftUI中点击LazyVGrid的GridItem如何跳转到指定视图

你需要通过SwiftUI的导航状态驱动实现跳转，无法直接在函数中执行跳转动作，具体实现步骤如下：

实现前提 #

网格布局效果参考：

你需要将当前持有LazyVGrid的视图套入NavigationStack（iOS16+，iOS15及更低版本使用NavigationView）容器中，所有跳转逻辑由导航容器的状态变量控制。

具体实现步骤 #

步骤1：定义跳转目标枚举与状态变量 #

在当前网格视图的结构体中添加如下代码：

// 跳转目标枚举，统一管理所有可跳转页面
enum GridJumpTarget {
    case fundTransfer
    case topUp
}

// 跳转触发状态，为true时自动执行跳转
@State private var isJumpActivated = false
// 存储要跳转的目标页面
@State private var targetPage: GridJumpTarget?

步骤2：修改getGridItem函数的逻辑 #

只需要在匹配到softcode时给状态变量赋值即可：

func getGridItem(index:Int){
    let softcode = arrayRes[index]["softcode"] as! String
    if softcode == "FundTransfer" {
        targetPage = .fundTransfer
        isJumpActivated = true
    } else if softcode == "MYB_BKASH" {
        targetPage = .topUp
        isJumpActivated = true
    }
}

步骤3：给导航容器添加跳转目标映射 #

在NavigationStack的修饰符中添加navigationDestination，将枚举值和对应的目标视图绑定：

struct YourGridView: View {
    // 你原来的属性，比如columns、arrayRes等
    @State private var isJumpActivated = false
    @State private var targetPage: GridJumpTarget?
    
    enum GridJumpTarget {
        case fundTransfer
        case topUp
    }
    
    var body: some View {
        NavigationStack { // iOS15及以下替换为NavigationView
            // 你原来的其他布局代码
            LazyVGrid(columns: columns, spacing: 0) {
                // 你原来的ForEach生成网格的代码不需要修改
            }
            // 跳转目标映射配置
            .navigationDestination(isPresented: $isJumpActivated) {
                if let target = targetPage {
                    switch target {
                    case .fundTransfer:
                        FundtransferView()
                    case .topUp:
                        TopupView()
                    }
                }
            }
        }
    }

    // 你修改后的getGridItem函数放在这里
}

多页面跳转优化方案 #

如果你后续要支持更多的网格项跳转，可以用NavigationPath实现更灵活的跳转管理：

1. 替换状态变量为@State private var navPath = NavigationPath()
2. 修改getGridItem函数，直接向path中添加目标枚举值即可触发跳转：

func getGridItem(index:Int){
    let softcode = arrayRes[index]["softcode"] as! String
    if softcode == "FundTransfer" {
        navPath.append(GridJumpTarget.fundTransfer)
    } else if softcode == "MYB_BKASH" {
        navPath.append(GridJumpTarget.topUp)
    }
}

3. 绑定导航路径并配置目标映射：

NavigationStack(path: $navPath) {
    // 网格布局代码
}
.navigationDestination(for: GridJumpTarget.self) { target in
    switch target {
    case .fundTransfer:
        FundtransferView()
    case .topUp:
        TopupView()
    }
}

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