为什么我不能 H 居中并为 StackView 中的元素提供固定宽度

Question

我一直的问题是如何在堆栈视图中居中一个元素

请看我下面的截图来解释：

数字 1) 是主 StackView

第 2 号）我想让其内容（第 3 号中的 UIView）在其中居中的相关 StackView

3 号）这个 UIView 我想把它放在 2 号里面，并给它一个更小的宽度来匹配图片中的蓝线

注意：问题是当我在 No.3 中给 UIView 一个固定宽度时，它总是会影响主 StackView 后面的滚动视图并缩小它！！

下面是1号主StackView的配置

下面是2号子StackView的配置

正如我所说，当我在 No.3 中为 UIView 提供固定宽度时，它总是会缩小并损坏 App 背景中的 scrollView

请问您能帮忙解决这个问题吗？

Answer 1

我假设您实际上并不想要 绿色 颜色 - 这只是为了让视图可见。

您可能想要做的是在绿色视图中嵌入水平堆栈视图（包含两个按钮），而不是相反（就像您现在拥有的那样）。

试试这样：

MainStack 设置：

BtnsStack 设置（我猜你想在按钮之间留一些空间 - 我使用了8）：

这是它在运行时的样子，绿色的BtnsStackHolderView 背景设置为清除：

并且，旋转以显示按钮保持水平居中：

---

编辑 如何在 stackView 中将绿色视图居中而不将其嵌入另一个视图中？

绿色视图未在堆栈视图中居中的原因是因为您将堆栈视图的 Alignment 设置为 Fill，这会拉伸排列的子视图以填充堆栈视图的宽度。

对于带有Vertical 轴的堆栈视图，对齐选项是：

• 填充
• 领先
• 居中
• 尾随

这是Center 的示例（堆栈视图本身被限制为顶部/前导/从边缘开始的 40 分）：

从底层开始……

蓝色的wEqToStack h60 视图受到限制：

• 高度 = 60
• 宽度等于堆栈视图的宽度

黄色的w200 h60 视图受到限制：

• 宽度 = 200
• 高度 = 60

橙色的wNone h60 视图受到限制：

• width = 没有设置宽度限制
• 高度 = 60

而绿色的BtnsStackHolderView 没有宽度或高度限制...它的大小取决于对其内容的限制（BtnsStack 每边有 20 分）。

如果我们运行它，我们会看到（红色虚线只是为了显示堆栈视图的框架）：

哎呀！橙景哪里去了？由于我们没有给它一个宽度约束，并且堆栈视图的Alignment 被设置为Center，它最终的宽度为零。

因此，如果您的堆栈视图中的大多数视图都定义了自己的宽度，则使用 center 会减少所需的“包含”视图的数量。但是，如果大多数视图都需要拉伸堆栈视图的宽度，那么在“包含”视图中嵌入您想要居中的内容可能会更容易。