iOS开发中数组索引0和1位置元素无法在Collection View正常显示问题求助

我之前也碰到过类似的异步加载图片配合CollectionView显示的坑，咱们来一步步拆解你的问题：

核心问题1：图片加载顺序与数组存储不匹配 #

你用append把加载好的图片加入数组，但URLSessionDataTask是异步执行的——谁先下载完成谁先被加入数组，这就导致imgarrPic里的图片顺序和你原始的imgarrURL顺序完全不一致，等所有图片加载完时，索引0、1对应的可能根本不是你预期的前两张图。

核心问题2：CollectionView未及时刷新 #

你的逻辑是只有当数组满了才显示图片，但前面的cell早就已经加载并显示占位图了。当所有图片加载完成后，CollectionView不会自动重新渲染已加载的cell，所以前两个cell还停留在占位图状态，而后面的cell是在数组满了之后才被滚动到，才会显示正确的图片。

修复后的完整代码方案 #

1. 调整数组存储方式，按索引对应图片

把imgarrPic改成可选类型的数组，初始化为和URL数组同长度的空值，这样每个位置对应固定的URL，不会乱序：

class correctHomeViewController: UIViewController {
    // 改成可选类型数组，初始化为对应长度的空值
    public var imgarrPic : [UIImage?] = []
    var imgarr = ["https://www.unsplash.com/photos/_3Q3tsJ01nc/download?force=true","https://www.unsplash.com/photos/dlxLGIy-2VU/download?force=true","https://www.unsplash.com/photos/TPUGbQmyVwE/download?force=true","https://unsplash.com/photos/9MRRM_hV4qA/download?force=true","https://unsplash.com/photos/HbAddptme1Q/download?force=true","https://unsplash.com/photos/wSct4rrBPWc/download?force=true","https://unsplash.com/photos/PKMvkg7vnUo/download?force=true"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始化数组，和URL数组长度一致，默认都是nil
        imgarrPic = Array(repeating: nil, count: imgarr.count)
        loadImage()
    }
    
    func loadImage() {
        let config = URLSessionConfiguration.ephemeral
        config.allowsCellularAccess = true
        config.waitsForConnectivity = true
        let sesh = URLSession(configuration: config)
        
        for position in 0..<imgarr.count {
            guard let url2 = URL(string: imgarr[position]) else {
                // 处理无效URL的情况
                DispatchQueue.main.async {
                    self.view.showToast(toastMessage: "无效的图片链接", duration: 5)
                }
                continue
            }
            // 这里把闭包的data参数改成responseData，避免和外部的dataTask变量重名
            let task = sesh.dataTask(with: url2) { [weak self] responseData, _, error in
                guard let self = self else { return }
                if let error = error {
                    DispatchQueue.main.async {
                        self.view.showToast(toastMessage: error.localizedDescription, duration: 5)
                    }
                    return
                }
                guard let responseData = responseData, let image = UIImage(data: responseData) else {
                    DispatchQueue.main.async {
                        self.view.showToast(toastMessage: "图片加载失败", duration: 5)
                    }
                    return
                }
                // 把图片放到对应索引的位置，而不是append
                self.imgarrPic[position] = image
                // 只刷新当前索引对应的cell，性能更好
                DispatchQueue.main.async {
                    let indexPath = IndexPath(item: position, section: 0)
                    self.collectionView.reloadItems(at: [indexPath])
                }
            }
            task.resume()
        }
    }
}

2. 修改CollectionView的cell渲染逻辑

去掉“等数组满了才显示”的限制，每个cell直接取对应索引的图片，有就显示，没有就显示占位图：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "productCell2", for: indexPath) as! ProductsViewCell
    cell.cornerRadius() // 这个方法如果是UI相关的，不需要放DispatchQueue.main，因为cellForItemAt本身就在主线程执行
    // 直接取对应索引的图片，有就显示，没有显示占位图
    cell.productImage.image = imgarrPic[indexPath.item] ?? UIImage(named: "pwPic")
    return cell
}

额外优化点 #

• 去掉了所有强制解包（!），换成guard let和可选绑定，避免因URL无效、图片数据损坏导致的崩溃
• 使用[weak self]避免循环引用
• 图片加载完成后只刷新对应的cell，而不是整个CollectionView，提升性能
• 把闭包参数data改成responseData，避免和外部的task变量（原代码里叫data）重名，增加代码可读性

内容的提问来源于stack exchange，提问作者Dev-onimoe