如何在UITableViewCell中动态并排添加多个UILabel（视图）

你的代码主要有两个核心问题导致UILabel无法正常显示：

• Cell复用重复添加视图：每次复用Cell时都会创建新的vStackView并添加到Cell，导致旧视图堆积，布局混乱。
• 缺少布局约束：vStackView仅通过addSubview添加到Cell，但未设置任何约束，系统无法确定其位置和尺寸，导致视图无法正常显示。

另外循环中的布局逻辑虽然能生成行列，但可以更简洁清晰。

修正后的实现步骤 #

1. 改造自定义DetailViewCell #

先在DetailViewCell内部提前初始化并配置垂直栈视图，避免每次复用重复创建：

class DetailViewCell: UITableViewCell {
    // 提前创建垂直栈视图，作为Cell的固定子视图
    let vStackView: UIStackView = {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 8
        stack.alignment = .top
        stack.translatesAutoresizingMaskIntoConstraints = false
        return stack
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    
    private func setupUI() {
        // 添加到contentView（不要直接加在cell上，避免和默认内容冲突）
        contentView.addSubview(vStackView)
        // 设置约束，比如给上下左右留16pt边距
        NSLayoutConstraint.activate([
            vStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            vStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            vStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            vStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
    }
    
    // 提供方法清空栈视图，准备复用
    func clearStackView() {
        vStackView.arrangedSubviews.forEach { subview in
            subview.removeFromSuperview()
        }
    }
}

2. 修正tableView的cellForRowAt方法 #

现在复用Cell时，先清空旧视图，再重新生成水平栈视图并添加内容：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let array = ["house", "bugs", "perl"] // 实际来自API
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! DetailViewCell
    // 复用前先清空旧视图
    cell.clearStackView()
    
    var currentHStack: UIStackView?
    for (index, item) in array.enumerated() {
        let label = UILabel()
        label.text = item
        label.textColor = .black
        // 给label设置宽度约束，避免自适应过宽/过窄
        label.widthAnchor.constraint(equalToConstant: 50).isActive = true
        label.heightAnchor.constraint(equalToConstant: 21).isActive = true
        
        if index % 2 == 0 {
            // 偶数索引（0,2,4...）创建新的水平栈
            let hStack = UIStackView()
            hStack.axis = .horizontal
            hStack.spacing = 8
            hStack.alignment = .fill
            hStack.distribution = .fill
            hStack.addArrangedSubview(label)
            currentHStack = hStack
        } else {
            // 奇数索引添加到当前水平栈，并将水平栈加入垂直栈
            currentHStack?.addArrangedSubview(label)
            if let stack = currentHStack {
                cell.vStackView.addArrangedSubview(stack)
                currentHStack = nil
            }
        }
    }
    // 处理数组元素为奇数的情况，把最后一个未添加的水平栈加入垂直栈
    if let remainingStack = currentHStack {
        cell.vStackView.addArrangedSubview(remainingStack)
    }
    
    return cell
}

3. 替换为UIButton并添加点击事件 #

如果要换成按钮，只需要把UILabel换成UIButton，同时添加点击事件。注意Cell复用的情况下，不需要每次都添加target（可以在创建按钮时添加，或者在Cell内部统一处理）：

// 替换label为button的代码示例
let button = UIButton(type: .system)
button.setTitle(item, for: .normal)
button.setTitleColor(.black, for: .normal)
button.widthAnchor.constraint(equalToConstant: 50).isActive = true
button.heightAnchor.constraint(equalToConstant: 21).isActive = true
// 添加点击事件，这里可以用tag区分，或者用闭包传递
button.tag = index
button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)

然后实现点击事件的方法：

@objc func buttonTapped(_ sender: UIButton) {
    let item = array[sender.tag] // 根据实际数组获取对应数据
    print("点击了按钮：\(item)")
}

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