UICollectionView重载时渐变颜色异常问题求助

问题原因 #

核心是单元格复用机制+重复添加渐变图层导致的：

• 每次调用setupGradient时，都会向bigSquare.layer插入新的CAGradientLayer，旧图层未被移除；
• 单元格复用时，多个渐变图层叠加显示，就会出现颜色混合的视觉效果；
• 单一颜色时因颜色一致，叠加后无差异，所以未暴露问题。

解决方案 #

方案1：复用同一个渐变图层（推荐） #

每个单元格实例仅创建并添加一次渐变图层，后续仅更新图层属性，避免重复插入：

class SurveyColorCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var bigSquare: UIView!

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    static let identifier = String(describing: SurveyColorCollectionViewCell.self)

    override func awakeFromNib() {
        super.awakeFromNib()
        // 初始化时一次性添加渐变图层
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        bigSquare.layer.insertSublayer(gradientLayer, at: 0)
        bigSquare.clipsToBounds = true
    }

    func setupGradient(_ survey: SurveyModel) {
        // 仅更新渐变的frame和颜色属性
        gradientLayer.frame = bigSquare.bounds
        gradientLayer.colors = [survey.firstColor.cgColor, survey.secondColor.cgColor]
    }

    func setup(_ survey: SurveyModel) {
        bigSquare.layer.borderWidth = 1
        bigSquare.layer.borderColor = UIColor.systemGray.cgColor
        bigSquare.layer.cornerRadius = 8
        
        self.setupGradient(survey)
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前清空渐变颜色，避免残留旧状态
        gradientLayer.colors = nil
    }
}

方案2：移除旧图层后再添加（备选） #

如果需要动态管理图层，可在每次设置前先移除旧图层：

func setupGradient(_ survey: SurveyModel) {
    // 先移除已存在的渐变图层
    gradientLayer.removeFromSuperlayer()
    
    gradientLayer.frame = bigSquare.bounds
    gradientLayer.colors = [survey.firstColor.cgColor, survey.secondColor.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    bigSquare.clipsToBounds = true
    
    bigSquare.layer.insertSublayer(gradientLayer, at: 0)
}

额外优化：减少不必要的刷新 #

当前选中单元格时调用reloadData()会刷新所有单元格，可改为仅刷新需要更新的项：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    collectionView.allowsMultipleSelection = false
    // 刷新之前选中的单元格
    if let selectedIndex = surveyViewModel.surveyColors.firstIndex(where: { $0.isSelected }) {
        surveyViewModel.surveyColors[selectedIndex].isSelected = false
        collectionView.reloadItems(at: [IndexPath(row: selectedIndex, section: 0)])
    }
    // 刷新当前选中的单元格
    surveyViewModel.surveyColors[indexPath.row].isSelected = true
    collectionView.reloadItems(at: [indexPath])
}

内容的提问来源于stack exchange，提问作者Mert Köksal