如何解决Collection View中不可见Cell的自定义视图选中状态修改异常

嘿，你的问题根源在于直接操作Cell实例而没有用数据驱动UI，而且对不可见的Cell调用cellForItem(at:)会返回nil，你用as!强制解包就会触发崩溃。

问题分析 #

当Cell不在屏幕可视范围内时，collectionView.cellForItem(at: indexPath)会返回nil，这时候你强行用as!转成colSizeDetails就会崩溃。另外，CollectionView的Cell是复用机制，直接修改Cell的UI状态，在Cell被复用时会出现状态混乱的问题。

正确的解决方案：数据驱动UI #

我们需要用一个数据模型来记录每个Cell的选中状态，让Cell根据模型的状态来渲染UI，而不是直接操作Cell实例。

1. 定义数据模型
   首先创建一个模型来保存每个尺寸项的内容和选中状态：

struct SizeItem {
    let sizeText: String
    var isSelected: Bool = false
}

2. 更新数据源数组
   在你的ViewController里，用这个模型数组作为CollectionView的数据源：

var sizeItems: [SizeItem] = []

// 初始化数据源示例（根据你的实际需求填充）
override func viewDidLoad() {
    super.viewDidLoad()
    sizeItems = [
        SizeItem(sizeText: "S"),
        SizeItem(sizeText: "M"),
        SizeItem(sizeText: "L"),
        SizeItem(sizeText: "XL")
    ]
    // 别忘了设置CollectionView的数据源和代理
    colCellSize.dataSource = self
    colCellSize.delegate = self
}

3. 在cellForItemAt中根据模型配置UI
   让Cell根据模型的isSelected状态来设置样式，这是复用机制下的正确做法：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "colSizeDetails", for: indexPath) as! colSizeDetails
    let currentItem = sizeItems[indexPath.row]
    
    // 设置文本内容
    cell.lblSize.text = currentItem.sizeText
    
    // 根据选中状态配置UI
    if currentItem.isSelected {
        cell.viewDetails.backgroundColor = UIColor.gray
        cell.lblSize.textColor = UIColor.white
        // 选中时可以去掉边框，避免样式冲突
        cell.viewDetails.layer.borderWidth = 0
    } else {
        cell.viewDetails.backgroundColor = UIColor.white
        cell.viewDetails.layer.borderWidth = 2.0
        cell.viewDetails.layer.borderColor = UIColor.gray.cgColor
        cell.lblSize.textColor = UIColor.gray
    }
    
    return cell
}

4. 修改didSelect和didDeselect方法
   现在只需要更新数据模型的状态，然后刷新对应的Cell即可，不需要直接操作Cell实例：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // 更新模型的选中状态
    sizeItems[indexPath.row].isSelected = true
    // 刷新当前Cell，让它重新根据模型渲染
    collectionView.reloadItems(at: [indexPath])
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    // 更新模型的非选中状态
    sizeItems[indexPath.row].isSelected = false
    // 刷新当前Cell
    collectionView.reloadItems(at: [indexPath])
}

为什么这样做？ #

• 避免了不可见Cell导致的nil崩溃：不管Cell是否在屏幕上，我们只操作数据模型，当Cell滚动到可视范围时，cellForItemAt会自动根据最新的模型状态渲染UI。
• 符合CollectionView的复用机制：Cell被复用时，会根据对应位置的模型状态重新配置，不会出现状态混乱的问题。

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