水平 StackView 的正确对齐和分布选择

Posted 2023-03-11

【中文标题】水平 StackView 的正确对齐和分布选择

【英文标题】：Proper Alignment and Distribution selection for Horizontal StackView

【发布时间】：2019-05-22 11:57:26

【问题描述】：

以下是我想要实现的设计的截图。

为此，我使用了一个包含其他四个水平堆栈视图的垂直堆栈视图。然后每个水平堆栈视图都包含一个图像和一个标签，如下所示。

我设置了水平堆栈视图fill 的alignment 并尝试更改Distribution。但是，我无法得到想要的结果。

什么alignment/distribution 组合可以产生预期的效果？ 还是应该消除水平堆栈视图并在垂直堆栈视图中填充视图？

【问题讨论】：

你能发布你得到的结果吗？您还可以在水平堆栈视图内尝试所有图标的垂直堆栈视图和所有标签的垂直堆栈视图。

你现在得到了什么？发布截图

【参考方案1】：

您可以使用 tableView 来完成此操作，但如果您有一些项目，那么

为主 stackview 和每个内部 stackView 设置间距应该提供所需的填充

要查看完整的演示，请查看演示

https://github.com/ShKhan9/stackV

【讨论】：

该解决方案有效，但我想知道的一件事是，如果我们设置图像宽度和高度，那么这不会阻止不同尺寸设备的图像缩放（1x、2x、3x 图像）吗？

不，它不会阻止它，由您决定增加宽度/高度

【参考方案2】：

按照步骤，

1. 将vertical stackView 和top, leading and trailing constraints 添加到view。

Alignment - Fill
Distribution - Fill
Spacing - 20

2. 将 1 个horizontal stackView 添加到vertical stackView

Alignment - Fill
Distribution - Fill
Spacing - 20

3.在上面的horizontal stackView中添加imageView和height and width constraints set to 30。

4.根据您的要求将horizontal stackView 复制到vertical stackView 的次数。

【讨论】：

可以在不定义图像高度和宽度的情况下完成此操作（第 3 步）[请参阅我在 Sh_Khan 的回答下的评论]？并且似乎不需要第 4 步。

如果你有小尺寸的图像，你就不需要了。将 imageView 的 contentMode 设置为 scaleAspectFit 即可。并且不需要 9 月 4 日。误加了。