UICollectionViewCompositionalLayout刷新后Cell宽度异常求助

问题场景 #

使用UICollectionViewCompositionalLayout实现固定高度、宽度自适应的标签式Cell，当向数据源数组添加新字符串并调用collectionView.reloadData()后，Cell宽度出现不稳定情况：有时能正确匹配文本宽度，有时却保留预估宽度导致文本被截断。

相关代码 #

布局创建代码 #

override func makeLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout(sectionProvider: { (sectionIndex, environment) -> NSCollectionLayoutSection? in

        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(40), heightDimension: .absolute(40))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        let inset: CGFloat = 10
        item.contentInsets = NSDirectionalEdgeInsets(top: inset, leading: inset, bottom: inset, trailing: inset)
            
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(40))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        group.interItemSpacing = NSCollectionLayoutSpacing.fixed(CGFloat(10))
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = CGFloat(10.0)
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
        section.supplementariesFollowContentInsets = false

        return section
          
    })
        
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .vertical
    config.interSectionSpacing = 10
    layout.configuration = config
      
    return layout
}

自定义CollectionViewCell代码 #

class CollectionViewCell: UICollectionViewCell {
    
    lazy var textLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont(name: "Stolzl-Regular", size: 12)
        label.textAlignment = NSTextAlignment.left
        label.backgroundColor = .clear //.red
        label.textColor = .white
        label.text = ""
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        label.lineBreakMode = NSLineBreakMode.byWordWrapping
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLabel()
    }
    
    func setupLabel(){
        addSubview(textLabel)
        addConstraintsWithFormat("H:|-10-[v0]-10-|", views: textLabel)
        addConstraintsWithFormat("V:|-10-[v0]-10-|", views: textLabel)
    }

    override func prepareForReuse() {
        super.prepareForReuse()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

解决方法 #

1. 修正Label的换行配置 #

Cell高度固定为40，无需多行显示，将Label的numberOfLines改为1，让系统能准确计算单行文本的宽度：

lazy var textLabel: UILabel = {
    let label = UILabel()
    // ... 保留其他属性
    label.numberOfLines = 1
    label.lineBreakMode = .byTruncatingTail // 可选，统一截断逻辑
    return label
}()

2. 精准刷新分区而非全局重载 #

避免使用reloadData()导致Layout复用缓存尺寸，直接刷新目标分区：

// 替换 reloadData()
collectionView.reloadSections(IndexSet(integer: 目标分区索引))

如果必须全局重载，先清空Layout缓存：

collectionView.collectionViewLayout.invalidateLayout()
collectionView.reloadData()

3. 优化Layout的尺寸预估配置 #

在section中明确设置预估尺寸，帮助Layout更准确地计算Cell宽度：

let section = NSCollectionLayoutSection(group: group)
// ... 其他section配置
section.estimatedItemSize = NSCollectionLayoutSize(widthDimension: .estimated(40), heightDimension: .absolute(40))

同时，在配置Cell数据时强制触发布局更新：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "你的CellID", for: indexPath) as! CollectionViewCell
    cell.textLabel.text = 数据源[indexPath.item]
    cell.layoutIfNeeded() // 立即更新布局，确保尺寸计算正确
    return cell
}

4. 确保数据源更新的正确性 #

使用不可变数组进行数据源更新（每次添加新元素时生成新数组），让CollectionView能正确感知数据变化，避免因数组引用未变导致的布局异常：

// 错误示例：直接修改原数组
dataArray.append(newString)
// 正确示例：生成新数组
dataArray = dataArray + [newString]

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