使用Compositional Layout实现动态宽高横向CollectionView崩溃求助

问题描述 #

尝试创建一个文本自适应宽高的CollectionView（文本来自服务，行数不固定），正常文本宽度不超过CollectionView时无问题，但展示长文本（如开启辅助功能大字号）时崩溃。仅在使用.estimated设置尺寸时出现崩溃，单元格占满可用空间时则不会。

报错信息 #

Thread 1: "<UICollectionViewCompositionalLayout: 0x105b08470> ran into an error when computing the layout for section at index 0 in container <_UICollectionLayoutContainer: 0x600001756440 contentSize={353, 500}; contentInsets={0, 0, 0, 0}}>. Container calculated by applying insets ({0, 0, 0, 0}) from sectionInsetsReference \"safeArea\" to collection view frame {{0, 0}, {353, 500}}.
Error: NSCollectionLayoutItem created with invalid combination of spacing and size specified. This group cannot fit even a single item. Inspect the spacing and size of the items in this group and ensure that they fit into the group when its effective size is {333, 480}.
Group: <NSCollectionLayoutGroup 0x6000035082c0 size={.containerWidthFactor(1), .estimated(480)}>
	 layoutDirection: .horizontal
	 interItemSpacing=.fixed(4)
	 subitems=
		 <NSCollectionLayoutItem 0x600002620660 size={.estimated(32), .estimated(120)}>

相关实现代码 #

CollectionView所在布局代码 #

stackView.addArrangedSubview(label)
stackView.addArrangedSubview(collectionViewWrapper)
stackView.backgroundColor = .white
collectionViewWrapper.translatesAutoresizingMaskIntoConstraints = false
let actionGruopViewHeight = collectionViewWrapper.heightAnchor.constraint(equalToConstant: 200)
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    stackView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -20),
    collectionViewWrapper.widthAnchor.constraint(equalTo: stackView.widthAnchor),
    actionGruopViewHeight
])
view.backgroundColor = .red

collectionViewWrapper.didLayoutAction =  {
    actionGruopViewHeight.constant = collectionViewWrapper.collectionView.contentSize.height
}

CollectionView包装视图代码 #

collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(ActionCell.self, forCellWithReuseIdentifier: ActionCell.reuseIdentifier)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = .green
addSubview(collectionView)
NSLayoutConstraint.activate([
    collectionView.topAnchor.constraint(equalTo: topAnchor),
    collectionView.trailingAnchor.constraint(equalTo: trailingAnchor),
    collectionView.leadingAnchor.constraint(equalTo: leadingAnchor),
    collectionView.bottomAnchor.constraint(equalTo: bottomAnchor)
])

CollectionView布局代码 #

private lazy var layout = UICollectionViewCompositionalLayout { [weak self] _, _ in
    let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(32), heightDimension: .estimated(120))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(480))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    group.interItemSpacing = .fixed(4)
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = .init(top: 10, leading: 10, bottom: 10, trailing: 10)
    section.interGroupSpacing = 4
    return section
}

单元格代码 #

private lazy var textLabel: UILabel = {
    let textLabel = UILabel()
    textLabel.numberOfLines = 0
    return textLabel
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    contentView.addSubview(textLabel)
    textLabel.translatesAutoresizingMaskIntoConstraints = false
    backgroundColor = .gray
    NSLayoutConstraint.activate([
        textLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
        textLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        textLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
    ])
}

问题原因分析 #

崩溃核心原因是水平布局组的可用宽度无法容纳单个单元格的实际需求宽度：

• 水平分组的可用宽度为容器宽度减去section左右内边距（各10），但单元格使用.estimated(32)的宽度，大字号下文本实际所需宽度会超过该可用空间，布局系统判断“连一个单元格都放不下”，直接触发崩溃。
• 同时给单元格宽高都设置.estimated，会让布局系统的计算逻辑混乱，尤其是水平布局场景下，双重预估容易引发尺寸冲突。

修复方案 #

方案1：固定单元格宽度范围，让文本自动换行 #

如果需求是单列展示，直接让单元格占满组的可用宽度，仅保留高度预估：

private lazy var layout = UICollectionViewCompositionalLayout { [weak self] _, _ in
    // 修改itemSize，宽度占满组宽度，高度由文本决定
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .estimated(120)
    )
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(120))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    // 移除interItemSpacing，单列无需间距
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = .init(top: 10, leading: 10, bottom: 10, trailing: 10)
    section.interGroupSpacing = 4
    return section
}

如果需要多列横向排列，给单元格设置固定比例宽度（如.fractionalWidth(0.45)），确保即使大字号下，单元格宽度也不会超过组的可用空间。

方案2：改用垂直布局组（单列场景更合理） #

如果是单列展示文本，直接用垂直布局组替代水平组，从根源避免宽度冲突：

private lazy var layout = UICollectionViewCompositionalLayout { [weak self] _, _ in
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .estimated(120)
    )
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    // 垂直组适配单列文本布局
    let groupSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .estimated(120)
    )
    let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = .init(top: 10, leading: 10, bottom: 10, trailing: 10)
    section.interGroupSpacing = 4
    return section
}

方案3：优化预估尺寸可靠性（保留水平布局时） #

如果必须保留水平布局和预估宽度，需确保预估宽度不会偏离实际需求：

1. 在单元格内部给textLabel添加宽度下限约束：

   textLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 80).isActive = true
   

2. 把单元格的预估宽度设置得更贴近实际场景（如.estimated(100)），避免布局系统计算时出现极端情况。

额外优化：避免动态修改容器高度的布局循环 #

当前通过didLayoutAction动态修改容器高度的方式可能引发布局循环，建议改为让CollectionView高度自适应内容：

• 移除actionGruopViewHeight固定高度约束，改为让collectionViewWrapper的高度由CollectionView内容决定，例如添加collectionView.heightAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor).isActive = true。

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