两个 UIStackView 的约束 - 一个在另一个下面

Constraints for two UIStackView - one under the other

我正在开发 "Hangman" 应用程序。在顶部我想要图像,在中间的文本字段中,在底部耦合 UIStackView 行的字母。现在我尝试只为两个 UIStackView 添加约束,一个在另一个下面,但一个总是在另一个后面,即。没看到。

在这张图片中,您只能看到第二个堆栈视图(名为:stacklView2),而第一个我看不到。为什么?我做错了什么?

这是代码:

import UIKit

class ViewController: UIViewController {

    var imageView: UIImageView!
    var answerTextfield: UITextField!

    override func loadView() {
        view = UIView()
        view.backgroundColor = .white

        imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
        imageView.layer.borderWidth = 1
        view.addSubview(imageView)

        answerTextfield = UITextField()
        answerTextfield.translatesAutoresizingMaskIntoConstraints = false
        answerTextfield.textAlignment = .center
        answerTextfield.isUserInteractionEnabled = false
        answerTextfield.layer.borderWidth = 1
        view.addSubview(answerTextfield)

        let button1 = UIButton()
        button1.backgroundColor = .red

        let button2 = UIButton()
        button2.backgroundColor = .blue

        let stackView1 = UIStackView(arrangedSubviews: [button1, button2])
        stackView1.translatesAutoresizingMaskIntoConstraints = false
        stackView1.distribution = .fillEqually
        stackView1.axis = .horizontal
        view.addSubview(stackView1)    

        let stackView2 = UIStackView(arrangedSubviews: [button2, button1])
        stackView2.translatesAutoresizingMaskIntoConstraints = false
        stackView2.distribution = .fillEqually
        stackView2.axis = .horizontal
        view.addSubview(stackView2)

        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor, constant: 5),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            answerTextfield.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20),
            answerTextfield.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 0.5),
            answerTextfield.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            stackView1.topAnchor.constraint(equalTo: answerTextfield.bottomAnchor, constant: 20),
            stackView1.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 1.0),
            stackView1.centerXAnchor.constraint(equalTo: view.layoutMarginsGuide.centerXAnchor),
            //stackView1.bottomAnchor.constraint(equalTo: stackView2.layoutMarginsGuide.topAnchor, constant: -5),

            stackView2.topAnchor.constraint(equalTo: stackView1.bottomAnchor, constant: 20),
            stackView2.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 1.0),
            stackView2.centerXAnchor.constraint(equalTo: view.layoutMarginsGuide.centerXAnchor),
            stackView2.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -5),
        ])

    }

    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.image = UIImage(named: "Hangman-0")
        answerTextfield.text = "T E X T F I E L D"
        setupNavigationBar()
    }

    func setupNavigationBar() {
        let hintButton = UIButton(type: .infoLight)
        hintButton.addTarget(self, action: #selector(hintTapped), for: .touchUpInside)
        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: hintButton)

        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(newGameTapped))
    }

    @objc func hintTapped() {
        print("Hint button tapped!")
    }

    @objc func newGameTapped() {
        print("New Game button tapped!")
    }

}

您在两个堆栈中使用相同的对象 button1button2

let stackView1 = UIStackView(arrangedSubviews: [button1, button2]) 
let stackView2 = UIStackView(arrangedSubviews: [button2, button1])

所以它被添加到 stackView2 只需要创建 2 个其他不同的元素,因为单个元素只能添加到 1 个视图