UIStackView可以滚动吗？

Question

假设我在UIStackView中添加了更多可以显示的视图，如何才能使UIStackView滚动？

Answer 1

正如Eik所说，UIStackView和UIScrollView在一起玩得很好，参见here。

关键是UIStackView处理不同内容的可变高度/宽度，然后UIScrollView很好地完成滚动/弹出内容的工作：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)       
}

Answer 2

我也想做同样的事情，但我偶然发现了这个excellent post.，如果你想用锚API通过编程来做这件事，这就是我要做的。

总之，将UIStackView嵌入到UIScrollView中，并将UIStackView的锚点约束设置为与UIScrollView的锚点约束相匹配

stackView.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
stackView.trailingAnchor.constraintEqualToAnchor(scrollView.trailingAnchor).active = true
stackView.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true
stackView.topAnchor.constraintEqualToAnchor(scrollView.topAnchor).active = true
stackView.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true

Answer 3

水平滚动(UIScrollView中的UIStackView)

用于水平滚动。首先，创建一个UIStackView和一个UIScrollView，并通过以下方式将它们添加到视图中：

let scrollView = UIScrollView()
let stackView = UIStackView()

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

记住在UIStackView和UIScrollView上将translatesAutoresizingMaskIntoConstraints设置为false

stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false

为了让一切正常工作，UIStackView的尾部锚点、前导锚点、顶部锚点和底部锚点应该等于UIScrollView锚点：

stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

但是UIStackView的宽度锚点必须等于或大于UIScrollView锚点的宽度：

stackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor).isActive = true

现在锚定您的UIScrollView，例如：

scrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

scrollView.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true 

接下来，我建议尝试以下UIStackView对齐和分布设置：

topicStackView.axis = .horizontal
topicStackView.distribution = .equalCentering
topicStackView.alignment = .center

topicStackView.spacing = 10

最后，您需要使用addArrangedSubview:方法向UIStackView添加子视图。

文本插入

您可能会发现另一个有用的特性是，因为UIStackView保存在UIScrollView中，所以您现在可以访问文本插入，从而使内容看起来更漂亮。

let inset:CGFloat = 20
scrollView.contentInset.left = inset
scrollView.contentInset.right = inset

// remember if you're using insets then reduce the width of your stack view to match
stackView.widthAnchor.constraint(greaterThanOrEqualTo: topicScrollView.widthAnchor, constant: -inset*2).isActive = true