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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有嵌入式堆栈视图的滚动视图在编程上失败相关的知识,希望对你有一定的参考价值。

我想以编程方式获得以下结构(当前正在失败...):

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

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

enter image description here

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

enter image description here

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

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),所以很明显,我缺少一些约束,对吧?

答案
对于stackView,您没有定义stackView.translatesAutoresizingMaskIntoConstraints = false

以上是关于具有嵌入式堆栈视图的滚动视图在编程上失败的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式在滚动视图中嵌入堆栈视图

如何在设置了“等宽”的滚动视图中嵌入的堆栈视图中将标签文本设置为远离视图边缘?

如何在 Swift IOS 中创建具有多个堆栈视图的可滚动堆栈视图

UITableViewCell 具有嵌入式垂直堆栈视图设置,具有自动布局和动态高度

无法在滚动视图中正确调整堆栈视图

当我将片段添加到我的视图寻呼机时(在嵌套滚动视图中),我无法从具有设备后退按钮的应用程序退出