scrollView 在 stackView 中不起作用，如何以编程方式滚动 stackView

Question

我在ScrollView的stackView中添加了一些标签，在stackView中添加了一些标签，但是没有滚动，为什么没有滚动？我尝试在stackView中添加scrollView，它不起作用，请帮助我，代码附在下面

class ViewController: UIViewController {

    let scrollView = UIScrollView()

    let formulas = ["", "", "","","", "", "",""]
    
    let formulasStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.backgroundColor = #colorLiteral(red: 0.2587976158, green: 0.2588401437, blue: 0.258788228, alpha: 1)
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = 5
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupScrollView()
        addFormulas()
    }

    func setupScrollView(){
           scrollView.translatesAutoresizingMaskIntoConstraints = false
            formulasStackView.translatesAutoresizingMaskIntoConstraints = false
           view.addSubview(scrollView)
         
           
           scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
           scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
           scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
           scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        
        scrollView.addSubview(formulasStackView)
    
        formulasStackView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
        formulasStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
        formulasStackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        
       }

    func addFormulas() {
        for index in 0..<formulas.count {
            addFormulaView()
        }
    }

    func addFormulaView() {
        let formulaView: UIView = {
            let view = UIView()
            view.backgroundColor = #colorLiteral(red: 0.1882152259, green: 0.1882481873, blue: 0.1882079244, alpha: 1)
            view.layer.cornerRadius = 6
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()
        formulasStackView.addArrangedSubview(formulaView)
        
        formulaView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        formulaView.leadingAnchor.constraint(equalTo: formulasStackView.leadingAnchor, constant: 5).isActive = true
        formulaView.trailingAnchor.constraint(equalTo: formulasStackView.trailingAnchor, constant: -5).isActive = true
        formulaView.translatesAutoresizingMaskIntoConstraints = false
    }
}

Answer 1

几件事...

首先，不直接相关，但最好将元素限制到视图的安全区域。

其次，我们要将滚动视图的子视图的定位（顶部/前导/尾随/底部）约束到滚动视图的内容布局指南（在这种情况下，唯一的子视图将是您的堆栈视图——您的“公式视图”将是堆栈视图的子视图）。将大小（在本例中为堆栈视图的宽度）限制为滚动视图的 Frame Layout Guide。

第三，如果一个 UI 元素是其 superView 的宽度，最好使用Leading 和Trailing 约束，而不是Width 和CenterX 约束。

所以，这是你的类有一些变化 - 查看代码中的 cmets：

class ViewController: UIViewController {
    
    let scrollView = UIScrollView()
    
    let formulas = ["", "", "","","", "", "",""]
    
    let formulasStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.backgroundColor = #colorLiteral(red: 0.2587976158, green: 0.2588401437, blue: 0.258788228, alpha: 1)
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = 5
        return stackView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupScrollView()
        addFormulas()
    }
    
    func setupScrollView(){
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        formulasStackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        // always a good idea to respect the safe-area
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([

            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
            scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),

            // use Leading and Trailing anchors instead
            //scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
            //scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
            
        ])
        
        scrollView.addSubview(formulasStackView)
        
        let cg = scrollView.contentLayoutGuide
        let fg = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // let's "inset" the stack view with 5-pts "padding" on all four sides
            formulasStackView.topAnchor.constraint(equalTo: cg.topAnchor, constant: 5.0),
            formulasStackView.leadingAnchor.constraint(equalTo: cg.leadingAnchor, constant: 5.0),
            formulasStackView.trailingAnchor.constraint(equalTo: cg.trailingAnchor, constant: -5.0),
            formulasStackView.bottomAnchor.constraint(equalTo: cg.bottomAnchor, constant: -5.0),
            
            // we have 5-pts on each side of the stack view, so
            //  constrain its width minus 10-pts
            formulasStackView.widthAnchor.constraint(equalTo: fg.widthAnchor, constant: -10.0),
        ])
        
        // these are wrong
        //formulasStackView.centerXAnchor.constraint(equalTo: scrollView.contentLayoutGuide.centerXAnchor).isActive = true
        //formulasStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
        //formulasStackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        
    }
    
    func addFormulas() {
        for index in 0..<formulas.count {
            addFormulaView()
        }
    }
    
    func addFormulaView() {
        let formulaView: UIView = {
            let view = UIView()
            view.backgroundColor = #colorLiteral(red: 0.1882152259, green: 0.1882481873, blue: 0.1882079244, alpha: 1)
            view.layer.cornerRadius = 6
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()
        formulasStackView.addArrangedSubview(formulaView)

        // views added as arranged subviews automatically get this set to false
        //  so not necessary
        //formulaView.translatesAutoresizingMaskIntoConstraints = false

        // all we need to do is constrain the height
        formulaView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        
        // do NOT add either of these constraints
        //formulaView.leadingAnchor.constraint(equalTo: formulasStackView.leadingAnchor, constant: 5).isActive = true
        //formulaView.trailingAnchor.constraint(equalTo: formulasStackView.trailingAnchor, constant: -5).isActive = true
    }
}