为UICollectionView的每个Cell添加独立倒计时器的实现问题

我来帮你搞定这个难题！你之前的代码核心问题在于用单个Timer和单个secondsRemaining变量共享所有Cell的倒计时状态，这就导致所有Cell都会同步显示同一个时间，完全达不到每个Cell独立倒计时的效果。下面是一套完整的解决方案：

1. 创建独立的倒计时数据模型 #

首先，我们需要为每个Cell对应的数据创建一个模型，用来存储它独有的剩余秒数：

struct CountdownItem {
    var remainingSeconds: Int
    // 可根据需求添加其他属性，比如唯一ID、标题等
}

2. 在ViewController中管理数据和全局Timer #

把原来的单个secondsRemaining替换成数组，用来存储所有Cell的倒计时状态；同时使用一个全局Timer统一刷新所有倒计时，避免每个Cell单独创建Timer造成性能浪费：

class VC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    @IBOutlet weak var collectionView: UICollectionView!
    
    // 存储所有Cell的倒计时数据，每个元素对应一个Cell
    var countdownItems: [CountdownItem] = []
    // 全局Timer，每秒触发一次刷新
    var timer: Timer?

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
        collectionView.delegate = self
        
        // 初始化示例数据：这里创建10个Cell，每个的倒计时起始秒数不同
        countdownItems = (0..<10).map { CountdownItem(remainingSeconds: 3600 + $0 * 60) }
    }

    // 页面即将显示时启动Timer
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateCountdowns), userInfo: nil, repeats: true)
    }

    // 页面即将消失时停止Timer，防止内存泄漏
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        timer?.invalidate()
        timer = nil
    }

    // 每秒更新所有倒计时数据，并刷新可见的Cell
    @objc private func updateCountdowns() {
        // 更新每个Item的剩余秒数（只有大于0时才减1）
        countdownItems = countdownItems.map { item in
            var updatedItem = item
            if updatedItem.remainingSeconds > 0 {
                updatedItem.remainingSeconds -= 1
            }
            return updatedItem
        }

        // 只刷新当前可见的Cell，比调用reloadData更高效
        collectionView.indexPathsForVisibleItems.forEach { indexPath in
            collectionView.reloadItems(at: [indexPath])
        }
    }
}

3. 自定义Cell并显示倒计时 #

首先创建你的自定义CollectionViewCell，添加一个Label用于展示倒计时：

class CountdownCell: UICollectionViewCell {
    @IBOutlet weak var countdownLabel: UILabel!
    // 可根据需求添加其他UI元素
}

然后在cellForItemAt方法中，根据对应的数据将秒数格式化为hh:mm:ss并显示：

extension VC {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return countdownItems.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CountdownCell", for: indexPath) as! CountdownCell
        let item = countdownItems[indexPath.item]
        cell.countdownLabel.text = formattedTime(from: item.remainingSeconds)
        return cell
    }

    // 辅助方法：将秒数转换为hh:mm:ss格式的字符串
    private func formattedTime(from seconds: Int) -> String {
        let hours = seconds / 3600
        let minutes = (seconds % 3600) / 60
        let seconds = seconds % 60
        return String(format: "%02d:%02d:%02d", hours, minutes, seconds)
    }
}

关键注意事项 #

• 独立数据存储：每个Cell的倒计时状态必须单独存在数组中，绝对不能用单个变量共享，这是实现独立倒计时的核心。
• 全局Timer优化：用一个Timer统一刷新所有数据，比每个Cell单独创建Timer性能更高，也更便于管理Timer的启停。
• Cell复用处理：由于我们每次刷新可见Cell时都会重新设置正确的倒计时文本，所以完全不用担心Cell复用导致的显示错误问题。

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