Xcode如何在水平stackview中创建一个方形按钮（宽度等于高度）

Posted 2023-02-27

【中文标题】Xcode如何在水平stackview中创建一个方形按钮（宽度等于高度）

【英文标题】：Xcode How to create a square button(width equal to height) inside a Horizontal stackview

【发布时间】：2017-10-14 22:00:25

【问题描述】：

我需要在页面底部创建 3 个方形按钮。所有这些都必须对齐，并且它们的大小应该是方形的。

到目前为止，我已经创建了一个水平堆栈视图，并创建了自动布局约束，从左侧开始 50，从右侧开始 50，从底部开始 10，并将堆栈视图高度设置为 60。

我如何创建方形按钮，因为 stackview 子视图的宽度是动态的并且在运行时确定？

如何为这三个按钮设置相同的纵横比？

【参考方案1】：

不要设置堆栈视图高度；让内容来决定。

您还没有确切说明您希望按钮的布局方式，但我假设您希望它们平均分布。

将按钮放在水平堆栈视图中 将堆栈视图的前、后和底部边缘约束到父视图 将堆栈视图的对齐方式设置为“填充”并将分布设置为“等间距” 在每个按钮上，在其宽度和高度之间创建一个 1:1 的纵横比约束 如果您想要按钮的最小高度，请在其中一个上设置 >= 高度限制 如果您想要按钮的固定高度，请在其中一个上设置 = 高度约束

【讨论】：

我可以将前两个按钮的纵横比设置为 1:1，但是当我移到第三个时，内容会超出页面。如果我将stackview x坐标设置为0,0。然后它要求我删除前两个按钮的纵横比

您是否完全按照我的描述创建了约束和设置？ IE。摆脱堆栈视图高度约束并仅创建我列出的约束（如果需要将其与其他内容隔开，您可以在堆栈视图顶部和其他内容之间添加一个约束）？我只是使用这些确切的步骤来创建这个答案，它可以正常工作。

是的，我已经清理了代码并按照您的步骤操作。非常感谢

长宽比！愿你幸福

【参考方案2】：

我认为您唯一缺少的就是在 Stack View 的 Attributes Inspector 中设置 Distribution。如下图所示将其设置为均匀分布：

要设置高度，您只需在每个按钮上设置一个高度约束。点击 tie fighter 外观图标并设置每个的高度：

【讨论】：

平均填充会给我等宽如何设置等高

检查有问题的图像我没有得到圆形按钮，因为宽度相同但高度不同，我无法设置纵横比

我看到了你的问题。似乎是一个错误。清除堆栈视图上的前导和尾随约束。然后设置一个约束来在容器中水平设置 StackView。然后，在 Attributes Inspector 中根据需要设置 Stack View Spacing Attribute。