按钮stackView间距不起作用-Swift-以编程方式

Posted 2023-02-27

【中文标题】按钮stackView间距不起作用-Swift-以编程方式

【英文标题】：button stackView spacing not working -Swift - Programmatically

【发布时间】：2020-09-15 08:20:02

【问题描述】：

我正在以这种方式在我的视图控制器中添加一个 stackView：

addSubview(stackView)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.anchor(top: nameLabel.bottomAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: trailingAnchor)
    
    
    let emotionsButton = EmotionButton()
    emotionsButton.translatesAutoresizingMaskIntoConstraints = false
    let contentButton = ContentsButton()
    contentButton.translatesAutoresizingMaskIntoConstraints = false
    
    
    
    stackView.axis = .horizontal
    stackView.alignment = .center
    stackView.distribution = .equalCentering
    stackView.spacing = 8
    
    stackView.addArrangedSubview(emotionsButton)
    stackView.addArrangedSubview(contentButton)
    
    emotionsButton.widthAnchor.constraint(equalToConstant: 91).isActive = true
    contentButton.widthAnchor.constraint(equalToConstant: 91).isActive = true
    
    emotionsButton.heightAnchor.constraint(equalToConstant: 83).isActive = true
    contentButton.heightAnchor.constraint(equalToConstant: 83).isActive = true

但我得到的结果不是我想要的；这就是我想要的：

这是我得到的：

【问题讨论】：

使用 stackview 可能有效，但我建议您可以创建一个 UIVIew，并将您的两个视图放入其中。然后在“UIView”（父视图）上水平居中

【参考方案1】：

UIStackView 尝试用其内容填充整个宽度。所以你在这里有一些选择

居中

由于 stackView 的内容大小基于其内容，您应该考虑去掉 leading 和 trailing 锚点，而使用水平中心。 （您可以将其中一个与中间的一个放在一起，以防止它与边缘重叠）

---

虚拟视图

另一个选项是添加。堆栈视图（内部）两侧的虚拟视图，使它们具有clear 颜色并让它们成为最后一个拥抱。所以。他们。能够。填充多余的空间。

---

其他选项

您可以实施其他选项（比如根本不使用堆栈视图）来实现它。

【参考方案2】：

如果你想在stackview上做，你不应该相应地配置你的子视图（emotionsButton，contentButton）的heightAnchor或widthAnchor。你只需要配置stackView的高度和宽度锚点，并让它相应地调整您的子视图。

stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .equalCentering
stackView.spacing = 8

stackView.widthAnchor.constraint(equalToConstant: 91 * 2).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 83).isActive = true

stackView.addArrangedSubview(emotionsButton)
stackView.addArrangedSubview(contentButton)

【参考方案3】：

将内容拥抱优先级更改为 .required 可能会起作用。

stackView.setContentHuggingPriority(.required, for: .horizontal)

【参考方案4】：

如果您在添加堆栈视图后添加您的排列子视图。添加新的排列子视图后尝试设置间距。