如何在堆栈视图中设置纵横比？

Posted 2023-02-27

【中文标题】如何在堆栈视图中设置纵横比？

【英文标题】：How to set aspect ratio in stack view?

【发布时间】：2018-10-20 14:05:37

【问题描述】：

我正在尝试改进我的应用，使其在每台 iPhone 设备上看起来都一样。我开始在 iPhone 8 plus 上进行设计。 我在视图中添加了 3 个按钮并设置了 3 个约束（宽度/高度和纵横比）1st button = Width:300 Height: 65 aspect ratio 2nd button = Width: 175 Height: 65 aspect ratio 3rd button = Width: 200 Height: 65 aspect ratio

我将它们添加到 stackView 并设置了一些选项(axis: vertical , alignment: center ,distribution: fill proportionally, spacing: 19) 现在我想设置stackView，使它在每个设备上看起来都完全相同。。当我添加 3 个约束（上/右/左 + 纵横比）时，我没有得到我想要的结果。知道我做错了什么吗？

【问题讨论】：

你设置了stack view的约束吗？

是的，例如我设置了 top:0 , left:50 ,right:50 和纵横比，它在每个 iphone 设备上看起来都不一样

【参考方案1】：

设置 stackView 分布 = FillEqually ，然后当你给 stackView 这些约束时

上、左、右和纵横比

任何项目的高度都会调整大小，并为每个项目提供您想要的方面，以便宽度会相应地拉伸

【讨论】：

我将 stackView 分布和约束设置为（上：50，左：50，右：50 纵横比），但仍然有同样的问题，它在每个设备上看起来都不一样。 （例如在 iphone SE 上，第一个按钮在视图之外）

你为堆栈设置了什么方面？？

根据您的情况，第一个按钮宽度将为 262，尽管堆栈宽度为 220 => 320 (iphoneSE 宽度) - (50+50) = 220 这将超过堆栈宽度，所以您需要减小此按钮或堆栈的纵横比

顺便说一句，在任何想要适应纵横比和不同屏幕尺寸的设计中，您都会遇到这种情况，您也可以根据设备尺寸以编程方式设置约束，因为自动布局的尺寸类别可能无济于事本期

我没有改变它们你必须改变你的需要自动布局根据堆栈的当前大小创建一个方面，这不是强制性的