Swift UIStackView-基于子对象自动计算理想尺寸

在使用一个游乐场以编程方式处理包含两个标签的

UIStackView

时，我意识到我处理堆栈视图和标签的方式不会自动计算它们的大小。这是我的（丑陋的）代码：

这段代码，除了非常庞大，可以做这么一件“简单的事情”，仍然以不正确的方式计算大小，因为我的游乐场视图是这样的：

---

有没有办法让

UIStackView

甚至

UIView

s在计算理想尺寸方面更加智能？

我很惊讶设置堆栈视图的

borderColor

和

borderWidth

会有什么效果

UIStackView

被记录为实际上它使用了一个

CatTransferMLlayer

作为它的层，

CatTransferMLlayer

文档中说

无论如何，由于堆栈视图的对齐方式是

.fill

，因此堆栈视图会创建所需的优先级约束，强制其排列的子视图与自身的宽度相同。以下是这些限制：

<NSLayoutConstraint:0x60800008c210 'UISV-alignment' UILabel:0x7f821e4023d0'Text 1'.leading == UILabel:0x7f821e608ef0'Text 2'.leading   (active)>
<NSLayoutConstraint:0x60800008c2b0 'UISV-alignment' UILabel:0x7f821e4023d0'Text 1'.trailing == UILabel:0x7f821e608ef0'Text 2'.trailing   (active)>
<NSLayoutConstraint:0x60800008c080 'UISV-canvas-connection' UIStackView:0x7f821e40b790.leading == UILabel:0x7f821e4023d0'Text 1'.leading   (active)>
<NSLayoutConstraint:0x60800008c1c0 'UISV-canvas-connection' H:[UILabel:0x7f821e4023d0'Text 1']-(0)-|   (active, names: '|':UIStackView:0x7f821e40b790 )>

<NSContentSizeLayoutConstraint:0x6080000b7a00 UILabel:0x7fe385601720'Text 1'.width == 44.5 Hug:250 CompressionResistance:750   (active)>
<NSContentSizeLayoutConstraint:0x6180000abac0 UILabel:0x7fb809d0d810'Text 2'.width == 47 Hug:250 CompressionResistance:750   (active)>

通过关闭

translatesAutoResizengMaskintoConstraints

，您可以告诉堆栈视图不要创建与其现有帧匹配的约束。如果随后使用约束来设置堆栈视图的位置，而不是其大小，则其他约束（如前所述）将能够设置其大小以适合其排列的子视图

下面是我在操场上写的：

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
PlaygroundPage.current.liveView = view

let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical

for i in 1 ... 2 {
    let label = UILabel()
    label.text = "Text \(i)"
    label.textColor = .white
    stackView.addArrangedSubview(label)
}

view.addSubview(stackView)
view.leadingAnchor.constraint(equalTo: stackView.leadingAnchor).isActive = true
view.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true

要概述堆栈视图，我们可以添加另一个视图：

let stackOutlineView = UIView()
stackOutlineView.translatesAutoresizingMaskIntoConstraints = false
stackOutlineView.backgroundColor = .clear
stackOutlineView.layer.borderWidth = 1
stackOutlineView.layer.borderColor = UIColor.black.cgColor
view.addSubview(stackOutlineView)
stackView.leadingAnchor.constraint(equalTo: stackOutlineView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: stackOutlineView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: stackOutlineView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: stackOutlineView.bottomAnchor).isActive = true

结果如下：

---

令人惊讶的解释。

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
PlaygroundPage.current.liveView = view

let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical

for i in 1 ... 2 {
    let label = UILabel()
    label.text = "Text \(i)"
    label.textColor = .white
    stackView.addArrangedSubview(label)
}

view.addSubview(stackView)
view.leadingAnchor.constraint(equalTo: stackView.leadingAnchor).isActive = true
view.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true

let stackOutlineView = UIView()
stackOutlineView.translatesAutoresizingMaskIntoConstraints = false
stackOutlineView.backgroundColor = .clear
stackOutlineView.layer.borderWidth = 1
stackOutlineView.layer.borderColor = UIColor.black.cgColor
view.addSubview(stackOutlineView)
stackView.leadingAnchor.constraint(equalTo: stackOutlineView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: stackOutlineView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: stackOutlineView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: stackOutlineView.bottomAnchor).isActive = true