如何以 UIImageView 作为其子项使水平 UIStackView 包装高度内容？

Question

我有以下横UIStackView

1. 黄色背景
2. 前导、顶部和尾部与安全区域相同
3. 对齐 = 顶部
4. 分配 = 按比例填充

---

UILabel 作为孩子

如果我将UILabel 添加为其子级，它将自动将高度内容包装如下

---

UIImage 作为孩子

我用 3 个相同的 UIImageView 替换 UILabel。

每个UIImageView 都有以下属性

1. 内容模式 = Aspect Fit

如下图

我想知道，我怎样才能让水平的UIStackView 换行到它的高度内容？

我希望UIStackView 将包裹UIImageView 的内容高度。因此，我们不会观察到UIStackView 的任何黄色背景。

请问，我怎样才能做到这一点？

到目前为止，我已经尝试过使用

1. UIStackView 和 UIImageView 的内容拥抱优先级
2. UIStackView 和 UIImageView 的内容压缩阻力优先级

仍然无法达到我想要的结果。

---

以下是原图源，为606x404

Answer 1

您无法仅通过 Storyboard 设置获得此结果 - 您需要一些代码。

根据显示所需输出的图像，您希望每个“行”：

• 有 3 张图片
• 以原始纵横比显示它们
• 图像之间的小间距（例如 4 点）
• 适合，使宽度和高度保持比例

第一条评论 - 忘记堆栈视图上的Distribution = Fill Proportionally。

对于这个布局，堆栈视图应该是：

• Axis: Horizontal
• Alignment: Fill
• Distribution: Fill
• Spacing: 4

所以，我们需要做的是根据图像的纵横比（高度/宽度）来约束每个 imageView 的纵横比。

这是一个完整的例子……它使用了这 6 张图片：

我们还将使用相同的设置（除了Axis: Vertical）将水平堆栈视图嵌入到垂直堆栈视图中。

class AdjustStackViewController: UIViewController {
    
    var vStack = UIStackView()
    
    var picNames: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // six images, named "p1" - "p6"
        for i in 1...6 {
            picNames.append("p\(i)")
        }
        
        // vertical stack view
        vStack.axis = .vertical
        vStack.spacing = 4
        
        // use auto-layout
        vStack.translatesAutoresizingMaskIntoConstraints = false
        
        // add it to the view
        view.addSubview(vStack)
        
        // respect safe-area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            // constrain vStack
            //  Top + 20
            //  Leading and Trailing 0
            vStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            vStack.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            vStack.trailingAnchor.constraint(equalTo: g.trailingAnchor),
        ])
        
        fillStacks()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // re-fill images in new (shuffled) order
        fillStacks()
    }
    
    func fillStacks() -> Void {
        
        // remove existing horizontal stack views (if needed)
        vStack.arrangedSubviews.forEach { v in
            v.removeFromSuperview()
        }
        
        let shuffledImages = picNames.shuffled()

        // two horizontal stack views each with 3 images
        var picNum: Int = 0
        for _ in 1...2 {
            let hStack = UIStackView()
            hStack.spacing = 4
            vStack.addArrangedSubview(hStack)
            for _ in 1...3 {
                // make sure we can load the images
                guard let img = UIImage(named: shuffledImages[picNum]) else {
                    fatalError("Could not load images!")
                }
                // create Image View
                let imgView = UIImageView()
                // set the image
                imgView.image = img
                // proportional constraint based on image dimensions
                imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width).isActive = true
                // add to hStack
                hStack.addArrangedSubview(imgView)
                // increment pic number
                picNum += 1
            }
        }

    }
    
}

它的外观如下：

当你运行它时，每次你点击视图时，它都会打乱图像的顺序，这样你就可以看到布局是如何适应的。