当内容太长时，具有 .estimated 宽度的组合布局项目会使应用程序崩溃

Question

我正在探索使用组合布局的神奇世界，我发现了一个小情况需要帮助。下面是一个简单的应用程序，它使用带有 CL 的 CollectionView 来使用 UIListContentConfiguration 圆形单元格显示随机字符串。该项目的宽度是 .estimated(30) 所以我可以根据单元格的内容获得自调整单元格（宽度）。在我将字符数从 50 增加到比方说 100 之前，这非常有效。（目前运行在 iPad Pro 9.7 上）。似乎 100 个字符超出了 CollectionView 的宽度，这使得我的应用程序开始使用疯狂的内存量，直到它因为同样的原因而崩溃。

重现方式： 将要显示的字符数更改为更大的数字。前任。 return (1...100).compactMap { [=13=]; return self.randomString(length: .random(in: 1..<150))}

import UIKit

class ViewController: UICollectionViewController {
    
    private let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    private lazy var values : [String] = {
        return (1...100).compactMap { [=10=]; return self.randomString(length: .random(in: 1..<50))}
    }()
    
    private func randomString(length: Int) -> String {
      return String((0..<length).map{ _ in letters.randomElement()! })
    }
    
    var compositionalLayout : UICollectionViewCompositionalLayout = {
        
        let inset: CGFloat = 2

        //Item
        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(30), heightDimension: .fractionalHeight(1))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        
        // Group
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(50))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        group.interItemSpacing = .fixed(4)
        group.edgeSpacing = NSCollectionLayoutEdgeSpacing(leading: .fixed(4), top: .fixed(4), trailing: .fixed(0), bottom: .fixed(0))
        
       
        // Section
        let section = NSCollectionLayoutSection(group: group)
        return UICollectionViewCompositionalLayout(section: section)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }

    private func configureUI() {
        self.collectionView.collectionViewLayout = compositionalLayout
        self.collectionView.dataSource = self
        self.collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
    }
   
}


extension  ViewController {
    
    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return values.count
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        var contentConfiguration = UIListContentConfiguration.valueCell()
        contentConfiguration.text = values[indexPath.item]
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.contentConfiguration = contentConfiguration
        cell.backgroundColor = UIColor(red: .random(in: 0...1) , green: .random(in: 0...1), blue: .random(in: 0...1), alpha: 1)
        cell.layer.cornerRadius = cell.frame.height / 2
        return cell
    }
}

Answer 1

这似乎是 Apple 组合布局中的一个错误。正如您在问题中所展示的那样，它很容易重现。当单元格的宽度超过集合视图的宽度时，应用程序会挂起，因为它在主线程上做了过多的工作。此时（当应用程序冻结或变得无响应时）您可以通过 XCode 停止执行并看到 Apple 的内部 API 正在进入某种无限循环，同时不断分配内存。因此最终崩溃...

不幸的是，solution/work-around 是将单元格的宽度限制在一个合理的范围内，这样它们就不会超过集合视图自身的宽度。也许使用自动布局规则，或者使用您从 UICollectionViewCompositionalLayout 获得的布局信息，例如：

    func createCompositionalLayout() -> UICollectionViewCompositionalLayout {
        return UICollectionViewCompositionalLayout { (section, layoutEnvironment) -> NSCollectionLayoutSection? in
            
            // use availableWidth variable to determine the max size for your cells
            let availableWidth: CGFloat = layoutEnvironment.container.effectiveContentSize.width
            ...
            ... do some additional layout work
            ...
        }
    }

当内容太长时，具有 .estimated 宽度的组合布局项目会使应用程序崩溃

Compositional Layout item with .estimated width crashes app when content is too long

swift

uicollectionviewcell

uicollectionviewlayout

uicollectionviewcompositionallayout