Constraints for Stack View in Stack View

Question

Why is this happening?

This is my constraints:

Two stack views: horizontal and vertical, both distribution set on "Fill Equally".

What am I doing wrong?

Answer 1

Your Vertical StackViews should be set to:

Alignment: Center
Distribution: Fill

And your Horizontal StackView should be set to:

Alignment: Fill
Distribution: Fill Equally

Result:

Answer 2

The distribution property determines the size of the subviews along the stack view axis, in this case, .fillEqually on your vertical stack views will cause the switch and label to have the same height.

The alignment property will determine the position and size of the views in the other axis. If set to .fill, the default value, the view will have the same size as the stack view.

In this case, the stack view will assign a width to the switch and label as wide as the containing stack view, but switches have a fixed size, so they'll override that and remain a fixed width.

If you want the labels and switches to be centered, set alignment to .center.