动态并排填充UITableViewCell按钮显示异常求助

实现UITableViewCell动态添加并排UIButton功能，已完成按钮并排布局，但运行时显示异常，有时第二行按钮会与第三行重叠。调用cell.layoutIfNeeded()无法解决问题。

原代码如下：

let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! DetailViewCell
let array = sections[indexPath.section].filters

var hStackView = UIStackView()
var vStackView = UIStackView()
vStackView.axis = .vertical
vStackView.distribution = .fillEqually
vStackView.spacing = 12
vStackView.alignment = .top

for (index, item) in array.enumerated() {
    let btn = UIButton()
    btn.setTitle(item.title, for: .normal)
    btn.titleLabel?.font = .systemFont(ofSize: 12)
    btn.setTitleColor(.black, for: .normal)
    btn.backgroundColor = UIColor(red: 220, green: 220, blue: 220)
    btn.layer.cornerRadius = 15;
    btn.addTarget(self, action: #selector(btnTapped(_:)), for: .touchUpInside)
    btn.tag = index
    
    if index % 2 == 0  {
        hStackView = UIStackView()
        hStackView.axis = .horizontal
        hStackView.spacing = 12
        hStackView.alignment = .fill
        hStackView.distribution = .fillEqually
        hStackView.addArrangedSubview(btn)
        if (index + 1) == array.count {
            vStackView.addArrangedSubview(hStackView)
            hStackView.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor).isActive = true
            hStackView.widthAnchor.constraint(equalTo: vStackView.widthAnchor, multiplier: 0.5).isActive = true
        }
    }
    else {
        hStackView.addArrangedSubview(btn)
        vStackView.addArrangedSubview(hStackView)
        hStackView.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor).isActive = true
        hStackView.trailingAnchor.constraint(equalTo: vStackView.trailingAnchor).isActive = true
    }
}
cell.addSubview(vStackView)
vStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    cell.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor, constant: -8),
    cell.trailingAnchor.constraint(equalTo: vStackView.trailingAnchor, constant: 8),
    cell.topAnchor.constraint(equalTo: vStackView.topAnchor, constant: -8),
    cell.bottomAnchor.constraint(equalTo: vStackView.bottomAnchor, constant: 8)
])
cell.layoutIfNeeded()
return cell

问题根源 #

1. UITableViewCell复用机制导致旧视图未被清除，每次复用都会叠加新视图，引发重叠
2. 颜色值设置错误（RGB未除以255），导致按钮背景色显示异常
3. StackView的distribution和alignment设置不合理，强制等高引发布局混乱
4. 直接向cell添加子视图而非contentView，不符合UITableViewCell规范
5. 奇数元素的处理逻辑存在漏洞，约束重复添加

修改后的代码 #

let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! DetailViewCell

// 清除cell中已存在的旧垂直栈视图
cell.contentView.subviews.forEach {
    if $0.tag == 1001 {
        $0.removeFromSuperview()
    }
}

let array = sections[indexPath.section].filters

let vStackView = UIStackView()
vStackView.tag = 1001 // 标记视图，方便后续复用清除
vStackView.axis = .vertical
vStackView.distribution = .fill // 自适应内容高度，而非强制等高
vStackView.spacing = 12
vStackView.alignment = .fill // 让水平栈铺满垂直栈宽度

var currentHStack: UIStackView?

for (index, item) in array.enumerated() {
    let btn = UIButton(type: .system)
    btn.setTitle(item.title, for: .normal)
    btn.titleLabel?.font = .systemFont(ofSize: 12)
    btn.setTitleColor(.black, for: .normal)
    // 修正颜色值，RGB需除以255
    btn.backgroundColor = UIColor(red: 220/255, green: 220/255, blue: 220/255, alpha: 1)
    btn.layer.cornerRadius = 15
    // 添加内边距，避免文字贴边
    btn.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
    btn.titleLabel?.numberOfLines = 0 // 允许文字换行
    btn.titleLabel?.textAlignment = .center
    btn.addTarget(self, action: #selector(btnTapped(_:)), for: .touchUpInside)
    btn.tag = index
    
    if index % 2 == 0 {
        // 偶数索引，创建新的水平栈
        let hStack = UIStackView()
        hStack.axis = .horizontal
        hStack.spacing = 12
        hStack.distribution = .fillEqually
        hStack.addArrangedSubview(btn)
        currentHStack = hStack
        
        // 处理最后一个元素为奇数的情况
        if index == array.count - 1 {
            vStackView.addArrangedSubview(hStack)
        }
    } else {
        // 奇数索引，添加到当前水平栈后加入垂直栈
        currentHStack?.addArrangedSubview(btn)
        if let hStack = currentHStack {
            vStackView.addArrangedSubview(hStack)
            currentHStack = nil
        }
    }
}

// 补充处理未添加的最后一个水平栈（元素个数为奇数时）
if let remainingHStack = currentHStack {
    vStackView.addArrangedSubview(remainingHStack)
    remainingHStack.widthAnchor.constraint(equalTo: vStackView.widthAnchor, multiplier: 0.5).isActive = true
}

// 将垂直栈添加到cell的contentView（规范做法）
cell.contentView.addSubview(vStackView)
vStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    vStackView.leadingAnchor.constraint(equalTo: cell.contentView.leadingAnchor, constant: 8),
    vStackView.trailingAnchor.constraint(equalTo: cell.contentView.trailingAnchor, constant: -8),
    vStackView.topAnchor.constraint(equalTo: cell.contentView.topAnchor, constant: 8),
    vStackView.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor, constant: -8)
])

return cell

关键修复点说明 #

• 清除旧视图：通过tag标记复用cell中的旧vStackView，每次复用前移除，避免视图叠加
• 颜色值修正：RGB值需除以255，否则会显示纯白色
• StackView布局优化：将vStackView的distribution改为.fill，避免强制所有行等高
• 按钮显示优化：添加内边距、允许文字换行，提升按钮显示效果
• 规范视图添加：将子视图添加到cell的contentView而非直接添加到cell
• 逻辑漏洞修复：完善奇数元素的处理逻辑，确保最后一个单独按钮的布局正确

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