ios - 以编程方式在 stackView 中布局子视图

问题描述

我希望 UITableCell 包含可变数量的按钮，例如“是”和“否”按钮，或“红色”、“绿色”和“蓝色”按钮。我尝试了各种方法，但最终决定在单元格中使用垂直 stackView 并以编程方式添加包含按钮的视图（请随时在此处提出更好的方法）。

我遇到的问题是我无法弄清楚自动布局在做什么。通常，当您在界面构建器中将视图添加到 stackView 时，您只需要一个高度值，然后它们就可以很好地堆叠。然而，下面的代码似乎给它们的宽度为零，如果我设置宽度，视图都在彼此之上。请注意，这不包括我上面提到的使响应更容易的按钮；我刚刚添加了两个视图。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "formQuestion") as! FormQuestionTableViewCell
    let view = UIView(frame: .zero)
    view.backgroundColor = UIColor.red
    view.translatesAutoresizingMaskIntoConstraints = false
    cell.questionOptions.addSubview(view)
    NSLayoutConstraint.activate([
        view.heightAnchor.constraint(equalToConstant: 8)
        // , view.widthAnchor.constraint(equalToConstant: 16)
    ])
    let view2 = UIView(frame: .zero)
    view2.backgroundColor = UIColor.blue
    view2.translatesAutoresizingMaskIntoConstraints = false
    cell.questionOptions.addSubview(view2)
    NSLayoutConstraint.activate([
        view2.heightAnchor.constraint(equalToConstant: 32)
        // , view2.widthAnchor.constraint(equalToConstant: 64)
    ])
    return cell
}

为了完整起见，FormQuestionTableViewCell 看起来像这样......

class FormQuestionTableViewCell: UITableViewCell {

    @IBOutlet weak var descriptionContainer: UIView!
    @IBOutlet weak var controlContainer: UIView!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var questionOptions: UIStackView!

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
}

当启用宽度约束时，这看起来像这样（尽管我认为这不是必需的）......

您能给我的任何帮助将不胜感激！

标签： iosswiftuitableviewuistackview

这是错误的：

cell.questionOptions.addSubview(view)

向中添加子视图时UIStackView，您应该使用：

.addArrangedSubview()

参考：

https://developer.apple.com/documentation/uikit/uistackview/1616227-addarrangedsubview

ios - 以编程方式在 stackView 中布局子视图

问题描述

解决方案

推荐阅读