UIStackView - 三个具有相对宽度的排列子视图

Posted 2023-02-27

【中文标题】UIStackView - 三个具有相对宽度的排列子视图

【英文标题】：UIStackView - Three arranged subviews with relative widths

【发布时间】：2016-02-25 19:41:22

【问题描述】：

我有一个外部 UIStackView，称之为outerStackView，具有以下属性：

outerStackView.axis = .Horizontal
outerStackView.distribution = .Fill
outerStackView.spacing = 10

outerStackView 具有三个排列的子视图（将它们视为 3 列），它们也恰好是 UIStackViews。

我想将三个排列的子视图（列）的宽度设置为 outerStackView 宽度的相对乘数。

所以我尝试这样做：

leftColumnStackView = UIStackView()
middleColumnStackView = UIStackView()
rightColumnStackView = UIStackView()

outerStackView.addArrangedSubview(leftColumnStackView)
outerStackView.addArrangedSubview(middleColumnStackView)
outerStackView.addArrangedSubview(rightColumnStackView)

leftColumnStackView.widthAnchor.constraintEqualToAnchor(outerStackView.widthAnchor, multiplier: 0.4, constant: 0).active = true
middleColumnStackView.widthAnchor.constraintEqualToAnchor(outerStackView.widthAnchor, multiplier: 0.4, constant: 0).active = true
rightColumnStackView.widthAnchor.constraintEqualToAnchor(outerStackView.widthAnchor, multiplier: 0.2, constant: 0).active = true

这会引发一堆自动布局错误。

如何使这三列 UIStackViews 与其父视图具有相对宽度？

【问题讨论】：

你能和我们分享一下错误吗？

看起来10的间距和乘数不匹配。乘数结果为 100%，这意味着没有空间留给间距。

@dasdom - 你说得对，我必须考虑间距。感谢您的提示

【参考方案1】：

我通过给左列和中间列提供相对宽度（考虑到它们之间的间距）来解决这个问题，而右列则简单地填充空间。

leftColumnStackView.widthAnchor.constraintEqualToAnchor(outerStackView.widthAnchor, multiplier: 0.38, constant: -20).active = true
middleColumnStackView.widthAnchor.constraintEqualToAnchor(outerStackView.widthAnchor, multiplier: 0.38, constant: -20).active = true