Stack View 中 Stack View 的约束

Question

为什么会这样？

这是我的约束：

两个堆栈视图：水平和垂直，均在 "Fill Equally" 上设置分布。

我做错了什么？

Answer 1

distribution 属性 决定子视图沿堆栈视图轴的大小，在这种情况下，垂直堆栈视图上的 .fillEqually 将导致开关和标签具有一样高

alignment 属性 将确定视图在另一个轴上的位置和大小。如果设置为默认值 .fill，视图将具有与堆栈视图相同的大小。

在这种情况下，堆栈视图将为开关和标签分配与包含堆栈视图一样宽的宽度，但开关具有固定大小，因此它们将覆盖它并保持固定宽度。

如果您希望标签和开关居中，请将 alignment 设置为 .center。

Answer 2

您的垂直 StackView 应设置为：

Alignment: Center
Distribution: Fill

并且您的 Horizo​​ntal StackView 应设置为：

Alignment: Fill
Distribution: Fill Equally

结果：