Swift中点击按钮调整UICollectionViewCell高度并显示Label的方案问询

当然有可行方案！我之前做过类似的需求，核心靠状态管理+Auto Layout+CollectionView动态刷新就能实现，一步步来：

1. 先搞定自定义Cell的布局与控件状态 #

首先在你的自定义UICollectionViewCell里做好控件布局，关键是让Cell高度能根据子控件的显示状态自动适配：

• 添加LabelThree，初始设置为隐藏
• 用Auto Layout给所有控件绑定约束，确保Cell的高度由子控件的布局决定

class CustomCell: UICollectionViewCell {
    // 声明控件
    let labelOne = UILabel()
    let labelTwo = UILabel()
    let toggleButton = UIButton(type: .system)
    let labelThree = UILabel()
    
    // 用闭包传递按钮点击事件给ViewController
    var onToggleTap: (() -> Void)?

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }

    private func setupUI() {
        // 横向StackView承载LabelOne、LabelTwo、按钮
        let horizontalStack = UIStackView(arrangedSubviews: [labelOne, labelTwo, toggleButton])
        horizontalStack.axis = .horizontal
        horizontalStack.spacing = 8
        horizontalStack.translatesAutoresizingMaskIntoConstraints = false
        
        // 初始化LabelThree为隐藏
        labelThree.translatesAutoresizingMaskIntoConstraints = false
        labelThree.isHidden = true
        labelThree.text = "Label Three"

        // 添加控件到contentView
        contentView.addSubview(horizontalStack)
        contentView.addSubview(labelThree)

        // 绑定Auto Layout约束
        NSLayoutConstraint.activate([
            // 横向StackView的约束
            horizontalStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            horizontalStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            horizontalStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            
            // LabelThree的约束（单独一行）
            labelThree.topAnchor.constraint(equalTo: horizontalStack.bottomAnchor, constant: 8),
            labelThree.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            labelThree.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            labelThree.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])

        // 绑定按钮点击事件
        toggleButton.addTarget(self, action: #selector(toggleButtonTapped), for: .touchUpInside)
        toggleButton.setTitle("展开", for: .normal)
    }

    @objc private func toggleButtonTapped() {
        onToggleTap?()
    }

    // 对外提供更新展开状态的方法
    func updateExpandedState(isExpanded: Bool) {
        labelThree.isHidden = !isExpanded
        toggleButton.setTitle(isExpanded ? "收起" : "展开", for: .normal)
        // 强制刷新布局确保约束生效
        layoutIfNeeded()
    }
}

2. 在CollectionViewController中管理展开状态 #

需要一个数组记录每个Cell的展开状态，然后处理按钮点击后的状态切换与Cell刷新：

class CollectionViewController: UICollectionViewController {
    // 数据源（示例，替换成你的实际数据）
    let data = Array(repeating: "Item", count: 10)
    // 记录每个Cell的展开状态，初始全为收起
    var expandedStates: [Bool] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始化展开状态数组
        expandedStates = Array(repeating: false, count: data.count)
        // 注册自定义Cell
        collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
        // 配置FlowLayout支持动态高度
        setupFlowLayout()
    }

    private func setupFlowLayout() {
        guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
        // 设置预估高度，让FlowLayout自动计算Cell高度
        flowLayout.estimatedItemSize = CGSize(width: collectionView.bounds.width, height: 30)
        flowLayout.minimumLineSpacing = 8
    }

    // MARK: - UICollectionViewDataSource
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
        
        // 配置基础内容
        cell.labelOne.text = "LabelOne"
        cell.labelTwo.text = "LabelTwo"
        
        // 设置当前Cell的展开状态
        let isExpanded = expandedStates[indexPath.item]
        cell.updateExpandedState(isExpanded: isExpanded)

        // 绑定按钮点击事件：切换状态并刷新Cell
        cell.onToggleTap = { [weak self] in
            guard let self = self else { return }
            self.expandedStates[indexPath.item].toggle()
            // 用performBatchUpdates实现平滑的高度过渡动画
            collectionView.performBatchUpdates({
                collectionView.reloadItems(at: [indexPath])
            }, completion: nil)
        }

        return cell
    }
}

3. 可选：手动指定Cell高度（适合你明确知道高度的场景） #

如果你不想依赖Auto Layout自动计算，而是想直接用你需求里的30/60高度，可以替换setupFlowLayout，改为实现sizeForItemAt方法：

// 移除setupFlowLayout，添加下面的代理方法
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.bounds.width
    let height = expandedStates[indexPath.item] ? 60 : 30
    return CGSize(width: width, height: height)
}

注意事项 #

• 确保Cell的contentView和子控件的约束没有冲突，否则Auto Layout无法正确计算高度
• 使用performBatchUpdates刷新Cell，相比直接reloadData会有更自然的高度过渡动画
• 如果你的CollectionView是用Storyboard创建的，记得给Cell设置正确的重用标识符

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