堆栈视图在有约束的情况下离开屏幕

Stack view goes off the screen with constraints

我有内部有多个 hirozontal 堆栈视图的垂直堆栈视图,但我不知道如何为它们设置约束,以便它们的高度和宽度将是“动态的”(取决于水平堆栈计数)。

垂直堆栈应在所有设备上全屏显示,因此它的限制是 20:20:20:20 按钮应 1:1 纵横比

即使我为垂直堆栈视图设置了限制,它也出于某种原因离开了屏幕。

水平堆栈视图:

垂直堆栈视图:

你的限制太强了。你是说垂直堆栈视图的 4 个边缘应该 等于 到超级视图的 4 个边缘(+ 一些常数), 不扭曲任何图片,所有图片的宽度必须相同,它们之间的间距为 10。这不可能。

您在这里看到的是布局系统试图满足垂直堆栈视图的前缘和后缘应等于父视图的前缘和后缘的约束。然而,这会使图像太大,这意味着总高度变得太大而无法适应屏幕,从而打破了顶部和底部边缘的限制。如果我们试图满足顶部和底部边缘约束,图像需要更小,我们最终会打破前缘和后缘约束。

的意思是说垂直堆栈视图的4条边不应该超过父视图的4条边,正确的?那是“小于或等于”或“大于或等于”的关系,而不是“等于”。

您应该添加:

  • 堆栈视图领先≥超级视图领先
  • 堆栈视图尾随 ≤ 超级视图尾随
  • 堆栈视图顶部≥超级视图顶部
  • stack view bottom ≤ super view bottom

但是,仅这四个不足以确定垂直堆栈视图的确切位置。您仍然需要一些等式约束。

由于您似乎希望它水平居中,因此您应该在堆栈视图上添加 centerX 约束。图像可能并不总是大到足以填满底部,因此使底部等式约束具有较低的优先级。您始终可以完全删除底部约束,但这会使图像无法扩展以填充底部 space,即使它可以。您似乎希望图像始终从顶部开始,因此顶部约束可以保持不变。不再需要前导和尾随约束,因为 centerX 约束已经确定了堆栈视图的水平位置。