使用 UIStackView 作为 UITableViewCell 的附件视图

Question

我希望我的表格视图单元格有多个附件按钮。 为此，我决定将它们添加到堆栈视图中：

extension MyTableViewController {
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath)
        cell.textLabel?.text = "Test"
        cell.accessoryView = self.newStackView()
        return cell
    }

    private func newStackView() -> UIView {
        let eyeButton = UIButton(image: "eye")
        let refreshButton = UIButton(image: "refresh")
        let stackView = UIStackView(arrangedSubviews: [eyeButton, refreshButton])
        stackView.axis = .horizontal
        return stackView
    }
}

fileprivate extension UIButton {
    convenience init(image systemName: String) {
        self.init()
        self.setImage(UIImage(systemName: systemName)!, for: .normal)
        self.sizeToFit()
    }
}

但是，这些按钮不会出现。

如果我使用其中一个按钮作为附件视图，它实际上会出现：

cell.accessoryView = UIButton(image: "eye")

我创建堆栈视图的方式有问题吗？

Answer 1

你的 stackView 应该告诉它的大小

private func newStackView() -> UIView {
    let eyeButton = UIButton(image: "eye")
    let refreshButton = UIButton(image: "refresh")
    let stackView = UIStackView(arrangedSubviews: [eyeButton, refreshButton])
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    stackView.spacing = 5
    stackView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        stackView.widthAnchor.constraint(equalToConstant: 65),
        stackView.heightAnchor.constraint(equalToConstant: 30)
    ])
    return stackView
}

Answer 2

您需要为视图设置“框架”约束

例如

stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: view.topAnchor),
    stackView.leftAnchor.constraint(equalTo: view.leftAnchor),
    stackView.rightAnchor.constraint(equalTo: view.rightAnchor),
    stackView.heightAnchor.constraint(equalToConstant: 10l)
])

或者

stackview.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

关注这个问题