如何让横向CollectionView所有单元格尺寸与最长文本单元格一致？

要实现横向CollectionView所有单元格宽高统一，且与文本最长的单元格尺寸一致，核心是提前计算所有单元格的最大尺寸，给FlowLayout设置固定itemSize，同时修复Cell内部重复添加子视图、动态尺寸计算失效的问题。以下是具体修改方案：

关键问题分析 #

1. 原代码使用estimatedItemSize，导致FlowLayout自动根据每个Cell的内容计算尺寸，出现宽度不一致的情况
2. Cell的configure方法每次都会新建StackView，重复添加子视图导致布局混乱
3. Label未设置固定字体和换行模式，尺寸计算不准确

修改后的完整代码 #

ViewController部分 #

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let viewModel: [SeatViewModel] = [
        .init(text: "single text"),
        .init(text: "slightly longer text."),
        .init(text: "very very very very long long text")
    ]
    
    // 存储计算好的最大单元格尺寸
    private var maxCellSize: CGSize!
    
    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 8 // 单元格间距，可按需调整
        let cv = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        cv.register(SeatCardCell.self, forCellWithReuseIdentifier: "SeatCardCell")
        cv.backgroundColor = .white
        return cv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 先计算所有文本对应的最大单元格尺寸
        calculateMaxCellSize()
        
        // 给FlowLayout设置固定的itemSize
        if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.itemSize = maxCellSize
        }
        
        self.view.addSubview(collectionView)
        
        collectionView.snp.makeConstraints { make in
            make.top.equalToSuperview().offset(20)
            make.leading.trailing.equalToSuperview().inset(16)
            make.height.equalTo(maxCellSize.height) // 高度与单元格高度统一
        }
        collectionView.dataSource = self
    }
    
    // 计算所有文本对应的最大单元格尺寸
    private func calculateMaxCellSize() {
        let tempLabel = CustomLabel()
        let imageWidth: CGFloat = 40
        let stackSpacing: CGFloat = 8 // 与Cell中StackView的间距保持一致
        
        var maxCellWidth: CGFloat = 0
        var maxCellHeight: CGFloat = 0
        
        for model in viewModel {
            tempLabel.text = model.text
            // 限制Label的最大宽度（避免过宽超出屏幕）
            let maxLabelWidth = UIScreen.main.bounds.width - 32 - imageWidth - stackSpacing
            // 计算Label在4行限制下的实际尺寸
            let labelSize = tempLabel.sizeThatFits(CGSize(width: maxLabelWidth, height: CGFloat.greatestFiniteMagnitude))
            
            // 单元格总宽度 = 图片宽度 + 间距 + Label宽度
            let cellWidth = imageWidth + stackSpacing + labelSize.width
            // 单元格高度 = 取图片高度与Label高度的最大值（匹配StackView的center对齐）
            let cellHeight = max(imageWidth, labelSize.height)
            
            maxCellWidth = max(maxCellWidth, cellWidth)
            maxCellHeight = max(maxCellHeight, cellHeight)
        }
        
        // 给单元格宽度加最小限制，避免过窄
        maxCellWidth = max(maxCellWidth, 120)
        maxCellSize = CGSize(width: maxCellWidth, height: maxCellHeight)
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return viewModel.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SeatCardCell", for: indexPath) as? SeatCardCell else { fatalError() }
        cell.backgroundColor = [.green, .red, .black, .brown, .yellow].randomElement()
        cell.viewModel = viewModel[indexPath.row]
        return cell
    }
}

Cell与ViewModel部分 #

struct SeatViewModel {
    let text: String
}

class SeatCardCell: UICollectionViewCell {
    
    var viewModel: SeatViewModel? {
        didSet {
            configure()
        }
    }

    // MARK: - Properties
    private let seatImageView = UIImageView()
    private let seatLabel = CustomLabel()
    private let stackView = UIStackView()

    // MARK: - Lifecycle
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout() // 初始化布局只执行一次
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 初始化Cell内部布局
    private func setupLayout() {
        stackView.axis = .horizontal
        stackView.spacing = 8 // 与计算尺寸时的间距保持一致
        stackView.alignment = .center
        stackView.addArrangedSubview(seatImageView)
        stackView.addArrangedSubview(seatLabel)
        
        // 必须添加到contentView，而非直接添加到Cell（UICollectionViewCell最佳实践）
        contentView.addSubview(stackView)
        
        // 设置ImageView约束
        seatImageView.snp.makeConstraints { make in
            make.size.equalTo(40)
        }
        
        // 设置StackView约束，添加内边距避免内容贴边
        stackView.snp.makeConstraints { make in
            make.edges.equalTo(contentView).inset(8)
        }
        
        seatImageView.contentMode = .scaleAspectFit
    }

    private func configure() {
        guard let viewModel = viewModel else { return }
        seatLabel.text = viewModel.text
        seatImageView.image = .strokedCheckmark // 确保你的图片资源存在
    }
}

// MARK: - 自定义Label
class CustomLabel: UILabel {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        textColor = .darkGray
        textAlignment = .left
        numberOfLines = 4 // 限制最多4行
        lineBreakMode = .byWordWrapping // 确保自动换行
        font = UIFont.systemFont(ofSize: 14) // 设置固定字体，保证尺寸计算准确
    }
}

核心修改说明 #

1. 提前计算最大尺寸：用临时Label模拟每个文本的显示效果，计算出所有单元格的最大宽高，确保所有Cell尺寸统一
2. 固定itemSize：替换estimatedItemSize为计算好的固定尺寸，彻底解决FlowLayout动态计算尺寸的问题
3. Cell布局优化：将布局代码移到init方法，避免重复添加子视图；使用contentView添加子视图，符合UICollectionViewCell的规范
4. Label配置优化：设置固定字体和换行模式，保证尺寸计算的准确性，同时限制最多4行显示

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