iOS 14 上的 UICollectionView 列表布局问题

Posted 2023-02-23

【中文标题】iOS 14 上的 UICollectionView 列表布局问题

【英文标题】：UICollectionView List Layout issue on iOS 14

【发布时间】：2020-11-12 04:44:43

【问题描述】：

ios 14 上的新 UICollectionView 的列表布局存在问题。

class ViewController: UICollectionViewController 
    struct Item: Hashable 
        let title: String
        let summary: String
    
    
    enum Section 
        case main
    
    
    var dataSource: UICollectionViewDiffableDataSource<Section, Item>!
    
    override func viewDidLoad() 
        super.viewDidLoad()
        let layoutConfig = UICollectionLayoutListConfiguration(appearance: .plain)
        let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
        collectionView.setCollectionViewLayout(listLayout, animated: false)
        
        let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Item>  cell, indexPath, item in
            var content = cell.defaultContentConfiguration()
            content.text = item.title
            content.secondaryText = item.summary
            cell.contentConfiguration = content
            cell.accessories = [.delete()]
        
        
        dataSource = UICollectionViewDiffableDataSource<Section, Item>(collectionView: collectionView) 
            collectionView, indexPath, identifier in
            collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)
        
        
        let items = (0..<100).map 
            Item(title: "Item \($0)", summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id tempor libero. Sed scelerisque mauris quis lacus vulputate, at efficitur neque sollicitudin. Vivamus aliquam dapibus tincidunt. Curabitur iaculis turpis vel lectus commodo aliquam. Nam felis orci, bibendum a felis convallis, scelerisque sollicitudin felis.")
        
        
        var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
        snapshot.appendSections([.main])
        snapshot.appendItems(items, toSection: .main)
        dataSource.apply(snapshot, animatingDifferences: false)
        
        navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Edit", style: .plain, target: self, action: #selector(edit))
    
    
    @objc private func edit() 
        collectionView.isEditing.toggle()
    

当我滚动到一个单元格时，例如索引 10 处的单元格，然后点击编辑按钮，集合视图会跳转到索引 32 处的单元格。

我尝试对集合视图单元进行子类化并指定一个固定高度，但没有帮助。

class MyCell: UICollectionViewListCell 
    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes 
        let attrs = super.preferredLayoutAttributesFitting(layoutAttributes)
        attrs.bounds.size.height = 200
        return attrs
    

UITableView（动态行高）不会出现此问题。

我错过了什么吗？谁能帮我解决这个问题？

谢谢！

【问题讨论】：

就在调用collectionView.isEditing.toggle() 之前，您可以获得可见的行，然后再滚动回该行？

【参考方案1】：

发生这种情况是因为当启用编辑模式并将删除按钮添加到单元格时，您的内容会增长，您可以看到您的内容从 6 行变为 7 行，因此您的单元格随之增长。 尝试向标签添加最大行数，看看它是否仍然发生。 如果您不想弄乱内容大小，则可以始终在切换之前保留对集合视图 contentOffset 的引用，并在打开时将其重新设置。