当轴垂直时在 UIStackView 的子视图上设置恒定宽度

Posted 2023-02-27

【中文标题】当轴垂直时在 UIStackView 的子视图上设置恒定宽度

【英文标题】：Setting constant width on subview of UIStackView when axis is vertical

【发布时间】：2017-10-05 19:20:09

【问题描述】：

我有一个包含 UIStackView 的 UIScrollView，我向它添加了视图，如果 UIStackView 需要的空间比屏幕上的空间多，那么由于 UIScrollView 它将滚动。

我可以在视图上设置恒定的高度，但我还需要在它们上设置特定的宽度，以便它们具有特定的宽度并且也在堆栈视图中居中。

类似这样的东西，除了 widthAnchor 不起作用。

import UIKit

class ViewController: UIViewController 

    let scrollView: UIScrollView = 
        let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.backgroundColor = .gray
        return sv
    ()

    let stackView: UIStackView = 
        let sv = UIStackView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.axis = .vertical
        return sv
    ()

    override func viewDidLoad() 
        super.viewDidLoad()

        view.addSubview(scrollView)

        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        scrollView.addSubview(stackView)

        stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
        stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

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

        let view1 = UIView()
        view1.backgroundColor = .red

        let view2 = UIView()
        view2.backgroundColor = .blue

        let view3 = UIView()
        view3.backgroundColor = .green

        let view4 = UIView()
        view4.backgroundColor = .purple

        stackView.addArrangedSubview(view1)
        stackView.addArrangedSubview(view2)
        stackView.addArrangedSubview(view3)
        stackView.addArrangedSubview(view4)

        view1.heightAnchor.constraint(equalToConstant: 200).isActive = true
        view2.heightAnchor.constraint(equalToConstant: 300).isActive = true
        view3.heightAnchor.constraint(equalToConstant: 420).isActive = true
        view4.heightAnchor.constraint(equalToConstant: 100).isActive = true

        // This does not work.
//        view1.widthAnchor.constraint(equalToConstant: 40).isActive = true
    

【参考方案1】：

UIStackView 上的alignment 属性决定了它的布局如何垂直 与其轴。默认情况下，UIStackView 的对齐方式为fill。在约束方面，fill 就像为每个排列的子视图添加一个约束到（在这种情况下）堆栈视图的左右边缘。这些隐式约束可能会导致您的问题。 解决方案：根据您想要的效果将stackView.alignment = 设置为leading、center 或trailing。

【讨论】：

如果你想让stackview更宽，使用stackview的宽度锚。