水平向 UIStackView 添加两个按钮，一个覆盖另一个

Question

所以我试图将两个宽度相等的按钮添加到我的视图中。我使用了堆栈视图，因为我认为这会更好。 第二个名为“排序”的按钮仅在正确宽度处可见，但覆盖了我的“添加”按钮，留下了它旁边的空白空间。 我已经在没有“排序”按钮的情况下运行它，我只是在整个堆栈视图中显示了“添加”按钮，正如我所期望的那样有点困惑，但是这个。 下面的代码不确定它发生了什么。如果认为不使用 stackView 更好，只需要一些关于处理约束的最佳方式的建议。感谢大家。 只是说我只在程序化方面工作。

import UIKit

class PlacesVC: UIViewController {


let topTitle = UILabel()
let logoImage = UIImage(named: "DIYCoffeeLogoDark")
let logoImageView = UIImageView()
let addButton = UIButton()
let sortButton = UIButton()
let buttonStack = UIStackView()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = #colorLiteral(red: 0.9324248433, green: 0.9268818498, blue: 0.9366856217, alpha: 1)
    logoImageView.image = logoImage
    self.navigationItem.titleView = logoImageView
    self.navigationController?.navigationBar.isHidden = false
    view.addSubview(topTitle)
    view.addSubview(buttonStack)
    setUpTopTital()
    setUpButtonStack()

}

func setUpTopTital() {
    topTitle.translatesAutoresizingMaskIntoConstraints = false
    topTitle.font = UIFont(name: "Futura", size: 25)
    topTitle.text = "Your Saved Places"
    topTitle.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    topTitle.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
    topTitle.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
    topTitle.heightAnchor.constraint(equalToConstant: 30).isActive = true
}

func setUpButtonStack() {
    buttonStack.translatesAutoresizingMaskIntoConstraints = false
    buttonStack.addArrangedSubview(addButton)
    buttonStack.addArrangedSubview(sortButton)
    buttonStack.distribution = .fillProportionally
    buttonStack.alignment = .center
    buttonStack.axis = .horizontal
    buttonStack.spacing = 20
    buttonStack.topAnchor.constraint(equalTo: topTitle.bottomAnchor, constant: 20).isActive = true
    buttonStack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    buttonStack.widthAnchor.constraint(equalToConstant: view.frame.width - 40).isActive = true
    buttonStack.heightAnchor.constraint(equalToConstant: 30).isActive = true
    setUpAddButton()
    setUpSortButton()
}

func setUpAddButton() {
    addButton.translatesAutoresizingMaskIntoConstraints = false
    addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    addButton.setTitle("ADD", for: .normal)
    addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    addButton.layer.cornerRadius = 5
    addButton.setTitleColor(.white, for: .normal)
}

func setUpSortButton() {
    addButton.translatesAutoresizingMaskIntoConstraints = false
    addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    addButton.setTitle("SORT", for: .normal)
    addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    addButton.layer.cornerRadius = 5
    addButton.setTitleColor(.white, for: .normal)
}

Answer 1

在 setUpAddButton() 和 setUpSortButton() 这两个函数中，您使用的是同一个按钮，即 addButton。

在 setUpSortButton() 中将 addButton 更改为 sortButton，然后您就可以在 stackview 中看到这两个按钮。

func setUpSortButton() {
    sortButton.translatesAutoresizingMaskIntoConstraints = false
    sortButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    sortButton.setTitle("SORT", for: .normal)
    sortButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    sortButton.layer.cornerRadius = 5
    sortButton.setTitleColor(.white, for: .normal)
}