堆栈视图如何动态更改嵌套在其中的元素之间的间距

Question

几个月来，我一直在努力思考堆栈视图及其工作原理。出于这个原因，我创建了一个项目，其中有 4 个按钮嵌套在具有恒定宽度和高度的堆栈视图中。现在根据 iPhone 屏幕尺寸，我希望 stackview 内的按钮保持它们的宽度和大小，但它们之间的间距会变小或变大。如果我使用鼠标手动调整 stackview 大小，则可以完美地完成此操作。但是，当我添加应该具有相同效果的顶部和底部约束时，堆栈视图中的按钮会缩小或奇怪地拉伸，即使它们的高度都恒定且优先级设置为 1000。

您可以自己尝试创建一个堆栈视图，其中包含一些按钮，然后将它们的宽度和高度设置为常量。之后添加顶部和底部约束并在比您创建它的屏幕尺寸更小的屏幕上预览它。

在 iPhone XS 上预览，如果屏幕较小，按钮之间的间隙应动态变大或变小：

预览 iPhone 8:

它应该是什么样子：

任何人都可以向我解释为什么会发生这种情况以及我如何才能达到我想要的结果吗？

Answer 1

您不应添加底部约束，而应仅向 UIStackView 添加高度约束，请查看以下示例

let buttons = [UIButton(), UIButton(), UIButton(), UIButton()]
for (index, button) in buttons.enumerated() {
    button.backgroundColor = .red
    button.setTitle("Category Button \(index)", for: .normal)
    button.setTitleColor(.black, for: .normal)
}
let stackView = UIStackView(arrangedSubviews: buttons)
stackView.axis = .vertical
stackView.distribution = .equalSpacing
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)

let salGuide = self.view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: salGuide.topAnchor, constant: 16.0),
    stackView.centerXAnchor.constraint(equalTo: salGuide.centerXAnchor, constant: 0),
    stackView.widthAnchor.constraint(equalTo: salGuide.widthAnchor, multiplier: 0.6),
    stackView.heightAnchor.constraint(equalTo: salGuide.heightAnchor, multiplier: 0.6)
])

请注意，multiplier: 0.6 将可用宽度和高度的 60% 分配给 UIStackView，要使用常量 width/height，只需将参数名称从 multiplier 更改为 constant 并提供适当的参数值。

iPhone SE

iPhone Xs 最大

堆栈视图如何动态更改嵌套在其中的元素之间的间距

How can a stackview dynamically change the spacing between the elements nested inside of it

xcode

autolayout

swift

uistackview