iOS 14上的UICollectionView列表布局问题

问题描述

我对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,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的单元格。

More Control Flow Tools section of the official documentation

我尝试对集合视图单元格进行子类化并指定固定高度，但这无济于事。

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

使用UITableView（动态行高）不会发生此问题。

我错过了什么吗？有人可以帮助我解决这个问题吗？

谢谢！

解决方法

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