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

几件事…

首先，不直接相关，但将元素约束到视图的安全区是一个好主意.

第二，我们想要约束滚动视图子视图的位置(Top/Leading/Trailing/Bottom)到滚动视图内容布局指南(在这种情况下，唯一的子视图将是你的堆栈视图——你的"公式视图";将是堆栈视图的子视图)。将大小(在本例中是堆栈视图的宽度)约束到滚动视图的框架布局指南

.第三，如果一个UI元素是它的父视图的宽度，最好使用Leading和Trailing约束，而不是width和CenterX约束。

所以，这是你的类做了一些修改——查看代码中的注释:

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
}
}