UIStackView：垂直轴肖像，水平轴风景

您是否曾经使用过UIStackView，并认为“ Jeez，此垂直堆栈视图在人像上看起来确实不错，但在风景上看起来像是一场灾难。如果我能使它在肖像上垂直但在风景上水平……”

好吧，本教程适合您！ 😁

如果您只想看技巧，请跳至第2部分！ 第1部分仅介绍如何进行设置。

从一个名为“ Single View Application”的新项目开始，然后直接跳入Main.storyboard文件。

将UIImageView插入到View Controller的任何位置，添加所需的任何图像。 我选择了柏拉图的图像。 确保将要使用的任何图像都放在项目的Assets目录中，以便该图像显示在“图像选择”中！

2. 在UIImageView下面插入一个标签。 将行数设置为0，并将换行符设置为自动换行。

将行数设置为0允许多行文本。标签将根据文本的数量占用其需要的任意数量的行。如果您不知道标签上要显示多少文本，这对动态文本很有用。

将换行设置为自动换行可以使文本在完整的单词处换行。

3. 将UIImageView和Label嵌入到堆栈视图中。 有很多方法可以做到这一点。在按住Cmd的同时单击图像和标签，然后按底部的堆栈图标。

4. 在堆栈视图上设置约束。 在文档轮廓上选择堆栈视图，然后设置水平和垂直约束。我选择了：尾随= 5，领先= 5，顶部空格= 20

5. 在堆栈视图上，将“对齐方式”设置为“ 填充” ，将“分布”设置为“ 均等填充”。

将“对齐方式”设置为“ 填充”可使每个项目完全填充垂直于堆栈视图轴的可用空间。将“分布”设置为“均等填充”可使堆栈视图中的每个项目均等地沿其轴填充空间。如果需要，请添加一些间距。我加了3。

6. 在标签上添加一些文本。

好的。全部设置好了。 😤

要更改堆栈视图在横向上的显示方式，我们需要实现特质变化。 “特征变化”根据设备的配置呈现不同的UI。在这种情况下，您希望堆栈视图在不同的设备方向（纵向和横向）上看起来有所不同。

在文档大纲上选择堆栈视图后，单击“轴”旁边的“ +”。 设置宽度：任意，高度：紧凑，色域：任意。 点击添加变体 。 将“轴”设置为向“ 水平”添加的变化。

在适用于景观移动设备的尺寸类上，堆栈视图将具有规则的宽度和紧凑的高度。该轴也将是水平的，因此堆栈视图中的项目将水平显示。

至于色域，它实际上与轴无关。它必须在颜色和图像属性上做更多的事情。将“色域”设置为“ 任意”意味着设备屏幕可以支持多种颜色。

有关色域的更多信息：

https://stackoverflow.com/questions/44480379/ios-what-does-gamut-have-to-do-with-the-axis-of-a-uistackview/44480430#44480430

您可以在此处阅读有关性状变异的更多信息：

https://developer.apple.com/documentation/uikit/uitraitcollection

而已。

结果：

就像柏拉图所说

没有斗争就没有美丽。