如何根据内容动态制作 Swift UIStackView 大小？

Posted 2023-02-27

【中文标题】如何根据内容动态制作 Swift UIStackView 大小？

【英文标题】：How do I make a Swift UIStackView size dynamically based on content?

【发布时间】：2021-10-04 19:08:31

【问题描述】：

我已将以下 UIStackView 添加到我的 ViewController。随着视图的变化，textOneLabel 和 textTwoLabel 的值也会发生变化。

使用以下代码，初始 StackView 居中，部分按比例填充。然而，随着随后的文本组合，StackView 的边界不会改变，从而使内容偏离中心。如何更改 StackView 属性，使其适应内容并始终居中？

headerStackView.axis = .horizontal
headerStackView.distribution = .fillProportionally
headerStackView.spacing = 8
headerStackView.layer.borderWidth = 1
headerStackView.layer.borderColor = UIColor.red.cgColor
    
headerStackView.translatesAutoresizingMaskIntoConstraints = false
headerStackView.topAnchor.constraint(equalTo: timerHeader.topAnchor, constant: 4).isActive = true
headerStackView.centerXAnchor.constraint(equalTo: timerHeader.centerXAnchor).isActive = true
    
headerStackView.addArrangedSubview(textOneLabel)
headerStackView.addArrangedSubview(textTwoLabel)

【问题讨论】：

不清楚您要做什么...您希望标签之间的空格保持居中吗？还是您希望堆栈视图的中心 保持居中？也就是说，您是否希望它看起来像此处的顶部或底部示例：i.stack.imgur.com/3qilC.png

很好的例子。我正在尝试执行您的第三个选项，其中 stackView 在视图中居中，但右侧的内容比左侧的内容长。如上所述，初始视图正确显示，但是当文字发生变化时，stackView 无法适应新的内容大小。

让我们再试一次...你想让 stackView FRAME 保持居中吗？或者，您是否希望标签之间的间隙保持居中？ i.stack.imgur.com/AEM36.png ... 或者，你想要别的东西吗？如果是这样，请向我们展示您希望其外观的图片。

StackView 应该始终在视图中居中，即使左右内容的长度不同。

【参考方案1】：

首先，忘记你听说过.fillProportionally...

它并没有像你想象的那样做 如果堆栈视图的间距大于零，您将遇到非常意想不到的布局问题 如果您的堆栈视图没有宽度（既没有宽度锚也没有前导/尾随锚），.fillProportionally 什么都不做

所以，请将您的 .distribution 更改为 .fill。

添加这些行来控制自动布局对标签的作用：

    textOneLabel.setContentHuggingPriority(.required, for: .horizontal)
    textOneLabel.setContentCompressionResistancePriority(.required, for: .horizontal)

    textTwoLabel.setContentHuggingPriority(.required, for: .horizontal)
    textTwoLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
    

现在，您的 stackView FRAME 将保持居中。

【讨论】：

谢谢DonMag。