如何在SwiftUI中为ForEach传递参数实现页面跳转？

我在SwiftUI中开发三级图书页面，分别为：

• TopGroup.swift（一级页面，展示图书主分类）
• SubGroup.swift（二级页面，展示图书子分类）
• Detail.swift（三级页面，展示图书详情）

目前已实现SubGroup与Detail的跳转，但TopGroup无法跳转至对应SubGroup，不清楚如何通过下标等方式传递参数。

数据模型定义 #

struct Top: Identifiable {
    let id = UUID()
    let name: String
    let group: [Group]
    subscript(_ groupIndex: Int) -> Group {
        return group[groupIndex]
    }
}

struct Group: Identifiable {
    let id = UUID()  
    let name: String 
    let books: [Book]  // 存储单本图书的详情信息
}

当前代码 #

TopGroup.swift #

struct TopGroup: View {
    var body: some View {
        NavigationView {
            List {
                // 展示主分类名称
                ForEach(top) { item in
                    NavigationLink {
                        SubGroup()  // 此处需要跳转到对应子分类页面
                    } label: {
                        VStack {
                            Text(item.name)
                        }
                    }
                }
            }
        }
    }
}

SubGroup.swift #

struct SubGroup: View {    
    var body: some View {
        NavigationView {
            List {
            
            // 此处应展示对应主分类下的子分类，比如group[0], group[1], group[2]...
                ForEach(group[0]) { item in
                    Section(header: Text("Books Category of \(item.name)")) {
                        
                        // 跳转到图书详情页
                        ForEach(item.books) { bookItem in
                            NavigationLink {
                                Detail(book: bookItem)
                            } label: {
                                BookRow(book: bookItem)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle(top[0].name, displayMode: .inline)
        }
    }
}

困惑点 #

• 如何将TopGroup的参数传递给SubGroup，使每个主分类项跳转至对应子分类页面；
• 无需创建多个如SubGroup0.swift的视图文件，即可展示不同子分类的视图内容。

解决方案 #

1. 给SubGroup添加接收参数的属性 #

修改SubGroup.swift，新增属性接收主分类数据，同时移除内层NavigationView避免导航栏异常：

struct SubGroup: View {
    // 接收从TopGroup传递的当前主分类实例
    let currentTop: Top
    
    var body: some View {
        List {
            // 遍历当前主分类下的所有子分类
            ForEach(currentTop.group) { subGroup in
                Section(header: Text("Books Category of \(subGroup.name)")) {
                    ForEach(subGroup.books) { bookItem in
                        NavigationLink {
                            Detail(book: bookItem)
                        } label: {
                            BookRow(book: bookItem)
                        }
                    }
                }
            }
        }
        .navigationBarTitle(currentTop.name, displayMode: .inline)
    }
}

2. 在TopGroup中传递参数到SubGroup #

修改TopGroup.swift的NavigationLink，将当前遍历到的主分类实例传入SubGroup：

struct TopGroup: View {
    // 假设此处是你的主分类数据源
    // let top: [Top] = [...]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(top) { item in
                    NavigationLink {
                        // 传递当前主分类数据到对应子分类页面
                        SubGroup(currentTop: item)
                    } label: {
                        VStack {
                            Text(item.name)
                        }
                    }
                }
            }
        }
    }
}

关键说明 #

• 通过给SubGroup添加currentTop属性，每个主分类项跳转时都会传递对应的Top实例，SubGroup直接遍历该实例的group数组即可展示对应子分类，无需创建多个视图文件。
• 移除SubGroup内的NavigationView，SwiftUI只需要外层一个NavigationView作为导航容器，后续页面通过NavigationLink跳转即可，避免双层导航栏问题。

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