滚动时显示重复数据的 CollectionView 单元格？

Posted 2023-03-16

【中文标题】滚动时显示重复数据的 CollectionView 单元格？

【英文标题】：CollectionView cell displaying duplicated data when scrolling?

【发布时间】：2020-04-08 13:14:40

【问题描述】：

我在表格视图中创建了用于滚动二维（水平 - 垂直）的集合视图 我从 JSON API 获取数据在第一次尝试时一切正常，但是当我向下滚动时出现问题：

采集重复数据的集合视图。它在单元格中显示错误的图像和文本数据。

我该如何解决这种情况？如下代码。

这个是我的主 TableView 的 cellForRowAt：

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 

    let cell = tableView.dequeueReusableCell(withIdentifier: exploreCellIDColl, for: indexPath) as! TableExploreCell

    cell.postCategory = exploreCategories?[indexPath.row]

    return cell

这个是TableViewCell中的CollectionView cellForItemAt：

// I created collection view in tableview cell
let cellCollectionView: UICollectionView = 

    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let collView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collView.backgroundColor = .clear
    return collView
()

 // This part showing duplicated wrong data (image and text)

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: exploreCellID, for: indexPath) as! CollectionExploreCell

           cell.postsExplore = postCategory?.post?[indexPath.row]
            self.postCategory?.post?.append(contentsOf: model.data ?? [])
            self.cellCollectionView.reloadData()

    return cell

【问题讨论】：

当 UICollectionView 滚动时，滚动到屏幕外的单元格被重用。但是这些单元格在重用之前不会被清除，因此它们可以包含以前使用的数据/图像。在cellForRowAt确保更新单元格的所有值/属性。你在哪里设置单元格的图像？

【参考方案1】：

这是每个人在第一次开始使用集合视图和表视图时都会遇到的常见问题。问题是细胞被回收了。当您在滚动后调用 dequeueReusableCell 时，您可能会收到一个刚刚滚动到屏幕外并且在其视图中包含上次使用的内容的单元格。您必须让 cellForItemAt/cellForRowAt 代码始终为每个字段设置一个值，而不管模型数据如何。

您的cellForItemAt() 代码使用可选链接来仅在模型的各个部分不为零时设置单元格视图（postCategory?.post?[indexPath.row] 中的问号和下面的行）。您需要改用 if let 或其他方法，始终将每个字段设置为一个值，并在数据模型的相应部分为 nil 时将其设置为空值。

还请注意，您不应该永远在cellForItemAt 内调用reloadData()。这将导致一个无限循环，其中集合视图尝试返回一个单元格，然后将所有单元格扔掉并开始加载新的单元格，但每次它返回一个新单元格时，都会再次将它们全部扔掉。