SwiftUI中跨API ID匹配过滤ForEach显示图片的实现

核心思路 #

• 处理类型差异：将SampleList中String类型的testSampleTypeId转换为Int，与LinkResponse的id做类型统一
• 过滤有效条目：遍历SampleList时，仅保留能找到对应LinkResponse的条目
• 显示匹配图片：对过滤后的条目，找到对应图片链接并渲染

结构体定义参考 #

// API返回的图片链接相关结构体
struct SampleImageLink {
    let linkResponse: LinkResponse
}

struct LinkResponse {
    let id: Int
    let imageUrl: String
}

// API返回的价格详情相关结构体
struct PriceDetailResponse {
    let sampleList: [SampleList]
}

struct SampleList {
    let testSampleTypeId: String
    // 其他业务属性...
}

基础实现代码 #

假设已获取到imageLinks（图片链接数组）和priceDetail（价格详情数据）两个数据源，在View中实现：

let imageLinks: [SampleImageLink] = ...
let priceDetail: PriceDetailResponse = ...

var body: some View {
    ForEach(priceDetail.sampleList.filter { sample in
        // 转换类型并检查是否存在匹配的图片链接
        guard let sampleId = Int(sample.testSampleTypeId),
              imageLinks.contains(where: { $0.linkResponse.id == sampleId })
        else {
            return false
        }
        return true
    }, id: \.testSampleTypeId) { sample in
        // 获取匹配的图片URL并渲染
        if let sampleId = Int(sample.testSampleTypeId),
           let matchedLink = imageLinks.first(where: { $0.linkResponse.id == sampleId }) {
            AsyncImage(url: URL(string: matchedLink.linkResponse.imageUrl)) { image in
                image.resizable()
                    .scaledToFit()
            } placeholder: {
                ProgressView()
            }
        }
    }
}

性能优化方案 #

如果需要频繁进行匹配操作，建议提前将图片链接转换为字典，提升查找效率：

let imageLinks: [SampleImageLink] = ...
let priceDetail: PriceDetailResponse = ...

// 预构建ID到图片URL的映射字典
private var imageUrlMap: [Int: String] {
    imageLinks.reduce(into: [:]) { map, link in
        map[link.linkResponse.id] = link.linkResponse.imageUrl
    }
}

var body: some View {
    ForEach(priceDetail.sampleList.filter { sample in
        guard let sampleId = Int(sample.testSampleTypeId),
              imageUrlMap.keys.contains(sampleId)
        else {
            return false
        }
        return true
    }, id: \.testSampleTypeId) { sample in
        if let sampleId = Int(sample.testSampleTypeId),
           let imageUrl = imageUrlMap[sampleId] {
            AsyncImage(url: URL(string: imageUrl)) { image in
                image.resizable()
                    .scaledToFit()
            } placeholder: {
                ProgressView()
            }
        }
    }
}

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