You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI ForEach使用问题:导航跳转后薪资数据显示错误

解决SwiftUI中ForEach生成NavigationLink跳转的问题

核心问题梳理

版本一错误原因

ForEach要求遍历的集合元素必须遵循Identifiable协议,或者初始化时显式指定id参数。如果你的Fleet模型既没实现Identifiable,也没给ForEach传id:\.self,就会触发「未遵循集合协议」的报错。

版本二错误原因

跳转后显示同一数据,是因为NavigationLink的destination里没有绑定当前遍历的元素,而是固定引用了数组的第一个元素(比如写死成RateDetailView(fleet: fleetData[0])),所有链接都指向同一个数据实例。

版本三错误原因

类型不匹配通常是ForEach遍历的元素类型和RateDetailView接收的参数类型不一致,比如遍历的是数组索引(Int),但RateDetailView需要的是Fleet实例,或者反过来。


正确实现代码

1. 确保模型符合遍历要求

先给Fleet模型添加Identifiable协议(或自定义唯一ID):

struct Fleet: Identifiable {
    let id = UUID() // 自动生成唯一ID,若机型名称唯一也可改用`let id = model`
    let model: String
    let hourlyPay: Double
    // 其他薪资相关字段
}

2. PayRateView的正确写法

用ForEach遍历Fleet数组,每个元素对应一个NavigationLink,并把当前元素传给详情页:

struct PayRateView: View {
    let fleetList: [Fleet] // 传入你的机型薪资数据源
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(fleetList) { fleet in
                    NavigationLink(destination: RateDetailView(selectedFleet: fleet)) {
                        Text(fleet.model)
                    }
                }
            }
            .navigationTitle("机型薪资查询")
        }
    }
}

3. RateDetailView接收并展示数据

确保详情页正确接收Fleet实例:

struct RateDetailView: View {
    let selectedFleet: Fleet
    
    var body: some View {
        VStack(spacing: 20) {
            Text(selectedFleet.model)
                .font(.title)
            Text("时薪: \(selectedFleet.hourlyPay, specifier: "%.2f")元")
                .font(.headline)
            // 其他薪资详情内容
        }
        .navigationTitle("薪资详情")
    }
}

针对三个版本的修复方案

  1. 版本一修复:要么给Fleet添加Identifiable协议,要么在ForEach里显式指定唯一ID(前提是字段唯一):

    ForEach(fleetList, id: \.model) { fleet in
        // NavigationLink内容
    }
    
  2. 版本二修复:把destination里的固定引用改成当前遍历的fleet变量,不要写死成数组索引。

  3. 版本三修复:对齐ForEach遍历类型和详情页参数类型,比如遍历索引时要通过索引取对应实例:

    ForEach(fleetList.indices, id: \.self) { index in
        NavigationLink(destination: RateDetailView(selectedFleet: fleetList[index])) {
            Text(fleetList[index].model)
        }
    }
    

内容的提问来源于stack exchange,提问作者weekendwarrior

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.13 09:01:12