堆叠标签、图像、文本、按钮和集合视图时推荐使用哪些 constraints/stack 视图设置
What constraints/stack view settings are recommended when stacking label, image, text, buttons, and collection view
我正在尝试使用垂直堆栈视图（堆栈视图 1）填充整个屏幕，其中堆栈中的元素是带有 2 个标签的水平堆栈视图（堆栈视图 2）、图像视图、文本视图，带有添加内容按钮的水平堆栈视图（Stack View3），然后是用于查看上传文件的集合视图。在 xCode 预览中，一切看起来都不错。我设置了限制条件，将 Stack View 1 设置为顶部的安全区域以及左右和底部的视图区域，我将 Stack View2 的高度设置为 20，这样我的文本就不会被剪裁，我设置了限制条件Stack View3 中的按钮都是 40 x 40，我设置了图像视图永远不会超过视图大小的 33% 的限制。
预览时一切看起来都不错...
但是当我在模拟器上加载它时，一切都乱七八糟……我的期望是我总是会得到 33% 的屏幕用于图像，然后在 40+20 用于堆栈视图之后文本视图和集合视图将填充 space.
的其余部分
任何人都可以提供任何提示，说明我错过了哪些约束或堆栈视图上的哪些设置可能不正确吗？我知道很难帮助解决像这样的董事会的限制。但是，对于我可能遗漏的任何提示，我们将不胜感激。我最困惑的是为什么 stack view3 没有正确填充 40x40 按钮。
我要检查的第一件事是 stackView3 是否将其分布设置为 equalSpacing。
接下来我会仔细检查图像约束是否符合您的描述，它在您的图像中被截断了，所以我们无法判断它是否正确。如果它使用的是不等式常量，您可以暂时将其更改为使用等式，看看是否会有所改善。
如果不是这些，我怀疑堆栈视图将自己的约束添加到其中一个按钮中，因为它认为布局不明确。这可能会打破您在第一个按钮上设置的宽度限制，因此控制台输出将包含一条以
开头的大日志消息
Unable to simultaneously satisfy constraints
您可以查看一下，看看是否有任何您不认为会导致问题的约束。或者您可以 post 在这里。
UITextView 和 UICollectionView 都没有固有高度 - 因此堆栈视图不知道如何处理它们的大小。
您的大部分内容看起来都是正确的，但您需要进行一些更改。
首先，您希望图像视图占视图高度的 33% 或更小？如果是这样，请不要将图像视图的高度限制为 view 的高度...将其限制为 OuterStackView.
其次，约束集合视图的高度等于文本视图的高度。
现在，您将拥有：
- 外部堆栈视图限制顶部和底部（因此，全高...并确保您限制在安全区域）
- 顶部标签堆栈视图
Height: 40
- 图像视图外部堆栈视图高度的 33%
- 按钮堆栈视图
Height: 40（因为按钮都是Height: 40
- 文本视图和集合视图将“拆分”垂直视图的其余部分space，因为它们彼此具有相同的高度。
这是它在 Storyboard 中的样子：
备注：
StackView1（“外部”堆栈视图）设置为：
Alignment: Fill
Distribution: Fill
Spacing: 8
StackView2（标签堆栈视图）设置为：
Alignment: Fill
Distribution: Fill
Spacing: 8
您需要根据自己的喜好设置标签的 Hugging 和 Compression Resistance 优先级。
StackView3（按钮堆栈视图）设置为：
Alignment: Fill
Distribution: Equal Spacing
Spacing: 0
应该这样做。
我正在尝试使用垂直堆栈视图（堆栈视图 1）填充整个屏幕，其中堆栈中的元素是带有 2 个标签的水平堆栈视图（堆栈视图 2）、图像视图、文本视图，带有添加内容按钮的水平堆栈视图（Stack View3），然后是用于查看上传文件的集合视图。在 xCode 预览中，一切看起来都不错。我设置了限制条件，将 Stack View 1 设置为顶部的安全区域以及左右和底部的视图区域，我将 Stack View2 的高度设置为 20，这样我的文本就不会被剪裁，我设置了限制条件Stack View3 中的按钮都是 40 x 40，我设置了图像视图永远不会超过视图大小的 33% 的限制。
预览时一切看起来都不错...
但是当我在模拟器上加载它时，一切都乱七八糟……我的期望是我总是会得到 33% 的屏幕用于图像，然后在 40+20 用于堆栈视图之后文本视图和集合视图将填充 space.
的其余部分任何人都可以提供任何提示，说明我错过了哪些约束或堆栈视图上的哪些设置可能不正确吗？我知道很难帮助解决像这样的董事会的限制。但是，对于我可能遗漏的任何提示，我们将不胜感激。我最困惑的是为什么 stack view3 没有正确填充 40x40 按钮。
我要检查的第一件事是 stackView3 是否将其分布设置为 equalSpacing。
接下来我会仔细检查图像约束是否符合您的描述，它在您的图像中被截断了，所以我们无法判断它是否正确。如果它使用的是不等式常量，您可以暂时将其更改为使用等式，看看是否会有所改善。
如果不是这些，我怀疑堆栈视图将自己的约束添加到其中一个按钮中，因为它认为布局不明确。这可能会打破您在第一个按钮上设置的宽度限制，因此控制台输出将包含一条以
开头的大日志消息Unable to simultaneously satisfy constraints
您可以查看一下，看看是否有任何您不认为会导致问题的约束。或者您可以 post 在这里。
UITextView 和 UICollectionView 都没有固有高度 - 因此堆栈视图不知道如何处理它们的大小。
您的大部分内容看起来都是正确的，但您需要进行一些更改。
首先，您希望图像视图占视图高度的 33% 或更小？如果是这样，请不要将图像视图的高度限制为 view 的高度...将其限制为 OuterStackView.
其次，约束集合视图的高度等于文本视图的高度。
现在，您将拥有：
- 外部堆栈视图限制顶部和底部（因此，全高...并确保您限制在安全区域）
- 顶部标签堆栈视图
Height: 40 - 图像视图外部堆栈视图高度的 33%
- 按钮堆栈视图
Height: 40（因为按钮都是Height: 40 - 文本视图和集合视图将“拆分”垂直视图的其余部分space，因为它们彼此具有相同的高度。
这是它在 Storyboard 中的样子：
备注：
StackView1（“外部”堆栈视图）设置为：
Alignment: Fill
Distribution: Fill
Spacing: 8
StackView2（标签堆栈视图）设置为：
Alignment: Fill
Distribution: Fill
Spacing: 8
您需要根据自己的喜好设置标签的 Hugging 和 Compression Resistance 优先级。
StackView3（按钮堆栈视图）设置为：
Alignment: Fill
Distribution: Equal Spacing
Spacing: 0
应该这样做。