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

Question

以下是显示我要实现的设计的屏幕截图。

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

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

哪种alignment/distribution组合可以产生预期的效果？ 或者我应该消除水平堆栈视图并在垂直堆栈视图中填充视图？

Answer 1

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

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

完整外观请查看演示

https://github.com/ShKhan9/stackV

Answer 2

按照步骤操作，

1.在view.

中添加一个vertical stackView和top, leading and trailing constraints

Alignment - Fill
Distribution - Fill
Spacing - 20

2.在vertical stackView

中加1horizontal stackView

Alignment - Fill
Distribution - Fill
Spacing - 20

3.在上面的horizontal stackView.

中加上imageView和height and width constraints set to 30

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