ios - Swift：堆栈视图未显示完整的子视图

Question

我有一个子视图：

这是该视图的子类：

class MyView: UIView {
    public init(){
        super.init(frame: .zero)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

在我的主视图控制器上，我有一个 stackView：

如果我将单个视图添加到堆栈视图：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    generaRedView()
}

func generaRedView() {
    let newView = MyView()
    newView.backgroundColor = .red
    stackView.addArrangedSubview(newView)
}

它看起来很好：

但是我在堆栈视图中添加了两个视图：

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        generaRedView()
        generaBlueView()
    }
    
    func generaRedView() {
        let newView = MyView()
        newView.backgroundColor = .red
        stackView.addArrangedSubview(newView)
    }
    
    func generaBlueView() {
        let newView = MyView()
        newView.backgroundColor = .blue
        stackView.addArrangedSubview(newView)
    }

子视图被压缩：

我对你们的问题是如何让 stackView 尊重子视图的大小并增加堆栈视图的高度，以便子视图看起来正常而不压缩？

我会非常感谢你的帮助。

Answer 1

首先创建单个方法来创建MyView实例。其次，在添加newViewto之前，为其stackView添加一个高度 constraint，即

func generateView(with color: UIColor, height: CGFloat) {
    let newView = MyView()
    newView.backgroundColor = color
    newView.translatesAutoresizingMaskIntoConstraints = false
    newView.heightAnchor.constraint(equalToConstant: height).isActive = true //here....
    stackView.addArrangedSubview(newView)
}

您可以像调用上述方法一样，

generateView(with: .red, height: 80.0)
generateView(with: .blue, height: 180.0)

截屏：

Answer 2

您需要考虑两件事：

1. 你的红色和蓝色的高度和宽度是views多少？您在问题中包含的代码并未显示您设置了views这些代码，但首先您需要为它们提供适当的高度以供考虑frame.zeroUIStackView

2. 您需要设置UIStackView distribution..您的视图distribute和stackView堆栈集如何constraint不固定其高度..如果您固定UIStackView高度，它将尝试以该高度布局子视图

所以你需要的是给你的观点高度constraint和distribution你stackView的不固定的集合height constraint：

func generaRedView() {
        let newView = MyView()
        newView.backgroundColor = .red

        newView.translatesAutoresizingMaskIntoConstraints = false
        newView.widthAnchor.constraint(equalToConstant: 100).isActive = true
        newView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        stackView.addArrangedSubview(newView)
    }

这就是您对视图施加约束的方式....并删除 stackView 的修复高度约束