Compositional Layout多section UICollectionView滚动时cell宽度重算跳动如何解决

问题根因 #

布局跳动的核心是UICollectionViewCompositionalLayout默认不会持久化cell计算后的实际尺寸，cell滚出屏幕复用后，会重新以初始设置的estimated(10)为基准计算，加上你当前Group写死了.absolute(2000)的固定宽度，和实际cell总宽度不匹配，双重导致布局偏移跳动。

具体解决方案 #

1. 缓存已计算的cell宽度

新增缓存容器存储每个IndexPath对应的cell实际宽度，避免复用后重复计算：

// ViewController 中新增缓存属性
private var cellWidthCache: [IndexPath: CGFloat] = [:]

在自定义Cell中新增计算完成回调：

// CollectionViewCell 类中新增属性
var didCalculateWidth: ((CGFloat) -> Void)?

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    let attributes = super.preferredLayoutAttributesFitting(layoutAttributes)
    // 计算完成后回调宽度
    didCalculateWidth?(attributes.frame.width)
    return attributes
}

在数据源方法中绑定缓存逻辑：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TestCell", for: indexPath) as? CollectionViewCell else {
        return UICollectionViewCell()
    }
    cell.setupCell(viewModel: dataSource[indexPath.section].valueModels[indexPath.row])
    // 绑定宽度回调
    cell.didCalculateWidth = { [weak self] width in
        guard let self = self, self.cellWidthCache[indexPath] != width else { return }
        self.cellWidthCache[indexPath] = width
        // 若首次计算宽度和估算值差异较大，只刷新当前cell，避免全局刷新闪动
        collectionView.reloadItems(at: [indexPath])
    }
    return cell
}

2. 修正Compositional Layout配置

将Group的固定宽度改为自适应估算宽度，同时开启布局缓存能力：

// Item
let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(10), heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

// Group 替换原来的absolute固定宽度为estimated，初始值可设为接近你业务的平均宽度
let groupSize = NSCollectionLayoutSize(widthDimension: .estimated(UIScreen.main.bounds.width), heightDimension: .absolute(50))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

// Section
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous

3. 多Section同步滚动实现

通过Section的可见元素回调实现横向滚动同步，注意加防重入标记避免循环触发：

// ViewController 新增防重入属性
private var isSyncingScroll = false

// 初始化Section时添加可见元素回调
section.visibleItemsInvalidationHandler = { [weak self] visibleItems, offset, environment in
    guard let self = self, !self.isSyncingScroll else { return }
    self.isSyncingScroll = true
    // 遍历所有可见Section的正交滚动视图，同步偏移量
    for sectionIndex in 0..<self.collectionView.numberOfSections {
        guard let sectionFrame = self.collectionView.layoutAttributesForItem(at: IndexPath(item: 0, section: sectionIndex))?.frame,
              self.collectionView.bounds.intersects(sectionFrame),
              let scrollView = self.collectionView.subviews.first(where: { 
                  $0 is UIScrollView && $0.frame.intersects(sectionFrame) 
              }) as? UIScrollView else { continue }
        scrollView.contentOffset = offset
    }
    self.isSyncingScroll = false
}

4. 可选优化（双保险）

实现UICollectionViewDelegateFlowLayout的尺寸代理方法，直接返回缓存的宽度，彻底规避系统自动估算的误差：

extension SomeViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let height: CGFloat = 50
        guard let width = cellWidthCache[indexPath] else {
            return CGSize(width: 10, height: height)
        }
        return CGSize(width: width, height: height)
    }
}

额外注意事项 #

• 确保Cell的水平方向Auto Layout约束完整，从左到右无断点，否则preferredLayoutAttributesFitting计算的尺寸会出错
• iOS15+版本可关闭预加载避免缓存混乱：collectionView.isPrefetchingEnabled = false
• 不要在cellForItemAt中修改Cell约束，所有约束调整都放到setupCell方法中处理，避免复用异常

内容的提问来源于stack exchange，提问作者Mr Matten