具有嵌入式堆栈视图的滚动视图在编程上失败

Question

我想以编程方式获得以下结构（当前正在失败...）：

• 查看
  • 滚动视图
    • 垂直堆栈视图

我能够在Interface Builder中获得想要的东西，但是似乎无法弄清楚如何在代码中实现这一点。在IB中，它看起来像这样（请单击图片以完全查看它）：

堆栈视图的设置如下所示：

现在，这是我尝试在代码中反映出来的内容：

import UIKit

class ScrollViewController: UIViewController {

    lazy var scrollView: UIScrollView = {
        let s = UIScrollView()
        s.contentMode = .scaleToFill
        s.backgroundColor = .gray
        s.accessibilityIdentifier = "scroll_view"
        s.translatesAutoresizingMaskIntoConstraints = false
        return s
    }()

    lazy var stackView: UIStackView = {
        let s = UIStackView()
        s.axis = .vertical
        s.alignment = .fill
        s.distribution = .equalSpacing
        s.spacing = 10
        s.contentMode = .scaleToFill
        s.accessibilityIdentifier = "stack_view"
        return s
    }()

    // See helper method at bottom
    lazy var textField1 = self.createTextField(placeholder: "Textfield 1")
    lazy var textField2 = self.createTextField(placeholder: "Textfield 2")
    lazy var textField3 = self.createTextField(placeholder: "Textfield 3")
    lazy var textField4 = self.createTextField(placeholder: "Textfield 4")
    lazy var textField5 = self.createTextField(placeholder: "Textfield 5")
    lazy var textField6 = self.createTextField(placeholder: "Textfield 6")

    override func loadView() {
        view = UIView()
        view.backgroundColor = .white

        view.addSubview(scrollView)
        scrollView.addSubview(stackView)

        stackView.addArrangedSubview(textField1)
        stackView.addArrangedSubview(textField2)
        stackView.addArrangedSubview(textField3)
        stackView.addArrangedSubview(textField4)
        stackView.addArrangedSubview(textField5)
        stackView.addArrangedSubview(textField6)

        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),

            stackView.widthAnchor.constraint(equalTo: scrollView.contentLayoutGuide.widthAnchor),
            stackView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            stackView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
        ])
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        scrollView.contentSize = stackView.frame.size
    }

    func createTextField(placeholder: String) -> UITextField {
        let t = UITextField()
        t.translatesAutoresizingMaskIntoConstraints = false
        t.borderStyle = .roundedRect
        t.clearButtonMode = .whileEditing
        t.text = placeholder
        t.placeholder = placeholder
        t.accessibilityIdentifier = placeholder
        return t
    }
}

我很明显缺少一些东西，但是即使花了几个小时尝试和谷歌搜索，我仍然没有找到解决方案...

我真正意识到的是，所有文本字段和堆栈视图的框架都是（0，0，0，0），所以很明显，我缺少一些约束，对吧？

Answer 1

对于stackView，您没有定义stackView.translatesAutoresizingMaskIntoConstraints = false