SwiftUI实现列表单元格跳转至对应详情页的方法咨询

针对你遇到的跳转问题，下面给出两种符合SwiftUI标准的实现方案，解决无法进入TravelDetail详情页的问题：

方案1：直接用NavigationLink实现跳转（最常规简洁的方式） #

SwiftUI中NavigationLink是专门用来处理页面跳转的组件，不需要额外用Button包裹单元格。直接把你的单元格内容作为NavigationLink的标签，配合navigationDestination指定跳转目标即可。

假设你的旅行数据结构体是这样的：

struct TravelItem: Identifiable {
    let id: UUID
    let title: String
    // 其他需要展示的详情属性，比如描述、图片URL等
}

修改后的列表页ContentView代码：

struct ContentView: View {
    // 模拟你的数据源
    let travelList: [TravelItem] = [
        TravelItem(id: UUID(), title: "云南大理行"),
        TravelItem(id: UUID(), title: "新疆喀纳斯之旅")
    ]
    
    var body: some View {
        NavigationStack { // NavigationStack作为根容器
            ScrollView {
                ForEach(travelList) { travel in
                    // 用NavigationLink包裹整个单元格内容
                    NavigationLink(value: travel) {
                        // 这里放你原来Button里的单元格样式
                        VStack(alignment: .leading, spacing: 8) {
                            Text(travel.title)
                                .font(.headline)
                            // 其他单元格UI元素，比如图片、简介等
                        }
                        .padding()
                        .background(Color(.systemGray6))
                        .cornerRadius(10)
                        .padding(.horizontal)
                    }
                }
            }
            .navigationTitle("旅行清单")
            // 配置跳转目标：当传递TravelItem类型的value时，跳转到TravelDetail
            .navigationDestination(for: TravelItem.self) { selectedTravel in
                TravelDetail(travel: selectedTravel)
            }
        }
    }
}

详情页TravelDetail接收数据的代码：

struct TravelDetail: View {
    let travel: TravelItem // 接收列表页传递的旅行对象
    
    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                Text(travel.title)
                    .font(.title)
                // 这里加载该旅行的其他详情信息，比如描述、图片等
            }
            .padding()
        }
        .navigationTitle("旅行详情")
    }
}

方案2：编程式跳转（适合需要额外点击逻辑的场景） #

如果你确实需要在点击单元格时先执行一些额外操作（比如打印日志、请求数据），再跳转详情页，可以用NavigationStack的路径绑定来实现编程式跳转：

修改后的ContentView代码：

struct ContentView: View {
    let travelList: [TravelItem] = [
        TravelItem(id: UUID(), title: "云南大理行"),
        TravelItem(id: UUID(), title: "新疆喀纳斯之旅")
    ]
    // 绑定NavigationStack的跳转路径，用来控制页面跳转
    @State private var navPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navPath) {
            ScrollView {
                ForEach(travelList) { travel in
                    Button(action: {
                        // 这里添加你的额外点击逻辑
                        print("用户点击了：\(travel.title)")
                        // 将选中的旅行对象加入路径，触发跳转
                        navPath.append(travel)
                    }) {
                        // 你的单元格样式，和之前保持一致
                        VStack(alignment: .leading, spacing: 8) {
                            Text(travel.title)
                                .font(.headline)
                        }
                        .padding()
                        .background(Color(.systemGray6))
                        .cornerRadius(10)
                        .padding(.horizontal)
                    }
                }
            }
            .navigationTitle("旅行清单")
            .navigationDestination(for: TravelItem.self) { selectedTravel in
                TravelDetail(travel: selectedTravel)
            }
            // 可选：添加自定义返回按钮
            .toolbar {
                Button("返回首页") {
                    navPath.removeLast(navPath.count)
                }
            }
        }
    }
}

你需要避开的几个误区 #

• 不要混用NavigationView和NavigationStack：iOS16+推荐用NavigationStack，旧版的NavigationView和它混用会导致跳转异常。
• 不用给NavigationLink套Button：NavigationLink本身自带可点击交互，额外套Button会干扰跳转逻辑。
• 确保数据结构体遵循Identifiable：如果你的结构体没实现这个协议，要在ForEach里显式指定id参数，比如ForEach(travelList, id: \.id)，否则列表项无法被正确识别。

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