为stackView中的项目设置最大高度的约束

Question

I have a stackView with UiViews boxes inside as you can see in the picture. I would like to set a max height of 50 or less for the boxes inside as they look too big right now but i also would like to keep the 1:1 ratio so that they would be square. I've tried to set a height constraint to the stackView but when i do that, the aspect ratio of 1:1 is being ignored.

Here's what it looks like right now:

And here's the code:

let stackview = UIStackView(arrangedSubviews: letterBoxes)
        stackview.axis = .horizontal
        stackview.spacing = 5
        stackview.distribution = .fillEqually
        stackview.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(stackview)        
        NSLayoutConstraint.activate([
            stackview.topAnchor.constraint(equalTo: secondLine.bottomAnchor, constant: c/2 +
                20),
            stackview.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            stackview.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10)
            ])

        for box in letterBoxes{
            box.aspectRation(1.0/1.0).isActive = true
        }

Edit: i want the box to auto-resize and not overflow like the following (each time there's a different amount of boxes. so for example when there are only 3 boxes i want that the max size will be 50 but when there are 6 or higher number I want it to auto-resize so that it will fit the screen and not overflow. once I take the leading constraint off it overflows):

Answer 1

The following will do the job.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let letterBoxes = [UIView(), UIView(), UIView()]
        for box in letterBoxes {
            box.translatesAutoresizingMaskIntoConstraints = false
            box.backgroundColor = .systemBlue
            view.addSubview(box)

            let heightConstraint = box.heightAnchor
                .constraint(equalToConstant: 50)
            heightConstraint.priority = .defaultHigh

            NSLayoutConstraint.activate([
                box.widthAnchor.constraint(equalTo: box.heightAnchor),
                heightConstraint
            ])
        }

        let stackview = UIStackView(arrangedSubviews: letterBoxes)
        stackview.axis = .horizontal
        stackview.spacing = 5
        stackview.distribution = .fillEqually
        stackview.alignment = .center
        stackview.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackview)

        NSLayoutConstraint.activate([
            stackview.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stackview.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackview.leadingAnchor.constraint(
                greaterThanOrEqualTo: view.leadingAnchor,
                constant: 10
            ),
            stackview.trailingAnchor.constraint(
                lessThanOrEqualTo: view.trailingAnchor,
                constant: -10
            )
        ])
    }
}

The point is to make the priorities of the heighConstraint s for the boxes to be less than required . So when there are not a lot of boxes, they will be of size 50, but when there are many, the height constraints will be ignored.

Also note that the stackview 's leadingAnchor and the trailingAnchor constraint keeps the boxes in the screen bounds.

The following screenshots show the result: