如何在竖向UIStackView中居中对齐两个UILabel并解决内容自适应问题

核心问题原因 #

• 根水平UIStackView的alignment属性设为.leading，无法自动完成子元素垂直居中对齐，你额外添加的居中约束和栈视图自身的布局规则冲突，导致informationStack被强行撑开，内部顶部Label被拉伸填充空余空间
• 竖向informationStack的alignment属性设为.leading，内部Label只会左对齐，无法实现居中效果
• Label默认的水平内容拥抱（Content Hugging Priority）优先级较低，容易被栈视图拉伸填充空间

修改步骤 #

1. 修改根水平UIStackView的alignment属性为.center，删掉你额外添加的informationStack相对于ImageView居中的多余约束，栈视图会自动完成子元素垂直居中对齐
2. 修改竖向informationStack的alignment属性为.center，让内部两个Label自动居中对齐
3. 给两个UILabel设置水平方向的内容拥抱、抗压缩优先级，避免被拉伸：

// 两个UILabel都需要添加该配置
label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
label.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)

修改后完整配置代码 #

private let stack: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .horizontal
    stackView.alignment = .center // 此处从.leading修改为.center
    stackView.spacing = 8
    return stackView
}()
private let informationStack: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.alignment = .center // 此处从.leading修改为.center
    stackView.spacing = 4 // 可自行调整两个Label的垂直间距
    return stackView
}()

内容的提问来源于stack exchange，提问作者Josh Birdwell