以编程方式创建 UIStackView - 不显示

Question

我正在尝试以编程方式创建堆栈视图，但该视图似乎并未在 viewcontroller 中自行呈现。

下面是我的代码和我得到的结果截图。如何让堆栈视图从导航栏底部开始？

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    createDropDownMenu()
}

private func createDropDownMenu(){

    let editButton = UIButton()
    editButton.titleLabel?.text = "Edit"
    editButton.backgroundColor = UIColor.appBlue.withAlphaComponent(0.5)

    let createFolderButton = UIButton()
    createFolderButton.titleLabel?.text = "Create Folder"
    createFolderButton.backgroundColor = UIColor.appBlue.withAlphaComponent(0.5)

    let SignOutButton = UIButton()
    SignOutButton.titleLabel?.text = "Sign Out"
    SignOutButton.backgroundColor = UIColor.appBlue.withAlphaComponent(0.5)

    // StackView
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.distribution = .equalSpacing
    stackView.alignment = .center
    stackView.spacing = 20

    stackView.addArrangedSubview(createFolderButton)
    stackView.addArrangedSubview(editButton)
    stackView.addArrangedSubview(SignOutButton)

    editButton.translatesAutoresizingMaskIntoConstraints = false
    editButton.heightAnchor.constraint(equalToConstant: 70).isActive = true
    editButton.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true

    createFolderButton.translatesAutoresizingMaskIntoConstraints = false
    createFolderButton.heightAnchor.constraint(equalToConstant: 70).isActive = true
    createFolderButton.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true

    SignOutButton.translatesAutoresizingMaskIntoConstraints = false
    SignOutButton.heightAnchor.constraint(equalToConstant: 70).isActive = true
    SignOutButton.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true

    view.addSubview(stackView)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    stackView.heightAnchor.constraint(equalToConstant: 400).isActive = true
    stackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true    
}
}

截图：

Answer 1

首先，您应该使用 setTitle 来更改按钮标题。

editButton.setTitle("Edit", for: .normal)

对于从导航栏底部启动 stackView，您必须在 topAnchor 约束中使用 view.safeAreaLayoutGuide.topAnchor。

stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

而且，您的按钮不需要 widthAnchor。当你在stackView中添加按钮时，按钮的宽度等于stackView的宽度。

Answer 2

设置 centerY 、 top 、 width 和 height auto-layout 时需要 x 约束 auto-layout 不知道根据 x space 放置 stackview 的位置，因此替换

stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

和

stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

并且如果你不需要它垂直居中，那么同时设置顶部约束和 centerY 也是不合逻辑的，而且你给每个按钮一个高度约束并将它们设置在一个具有预定义高度的堆栈中没有适当的分配

并删除

stackView.heightAnchor.constraint(equalToConstant: 400).isActive = true

然后替换

stackView.distribution = .equalSpacing

和

stackView.distribution = .fill

如果你需要它垂直和水平居中，那么

NSLayoutConstraint.activate([ 
  stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
  stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor), 
  stackView.widthAnchor.constraint(equalTo: view.widthAnchor)
])

以编程方式创建 UIStackView - 不显示

Creating UIStackView programmatically - not displaying

ios

nslayoutconstraint

swift