首页 > 解决方案 > 当我将 uibuttons 添加到堆栈视图时,它们会出现在彼此之上

问题描述

我正在开发一个测验应用程序,我想显示一个带有相应选项但只有一个正确答案的问题。每个问题对应的数量因问题而异(有些有 2、3、4 等)。选项通过 UIButton 显示,每个按钮都添加到 UIStackView。按钮的数量取决于问题有多少可能的选择。例如,如果问题有 2 个选项,则将 2 个按钮分配给 stackview。

但是,当我向堆栈视图添加一个按钮时,每个按钮都直接放在彼此的顶部,但我希望它们垂直且均匀地间隔开。这是我当前的代码:

        func viewConfiguration() {
    questionView.topAnchor.constraint(equalTo: headerView.bottomAnchor).isActive = true
    questionView.widthAnchor.constraint(equalTo: headerView.widthAnchor).isActive = true
    questionView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.385).isActive = true

    choicesView.topAnchor.constraint(equalTo: questionView.bottomAnchor).isActive = true
    choicesView.widthAnchor.constraint(equalTo: questionView.widthAnchor).isActive = true
    choicesView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Adds question title label to questionVIew hierarchy
    let questionLabel = UILabel()
    questionLabel.translatesAutoresizingMaskIntoConstraints = false

    questionView.addSubview(questionLabel)

    questionLabel.backgroundColor = UIColor.yellow
    questionLabel.centerXAnchor.constraint(equalTo: questionView.centerXAnchor).isActive = true
    questionLabel.centerYAnchor.constraint(equalTo: questionView.centerYAnchor).isActive = true



    // Adds question choices to choicesView hierarchy
    var questionChoices = [UIButton]()
    var buttonStack: UIStackView = {
        var stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.distribution = .fillEqually


        return stack
    }()

    let questionData = QuestionData()

    questionData.presentQuestion(label: questionLabel, buttons: &questionChoices)

    print("NUMBER OF BUTTONS IS --> \(questionChoices.count)")

    choicesView.addSubview(buttonStack)

    for button in questionChoices {
        buttonStack.addArrangedSubview(button)

    }


    buttonStack.heightAnchor.constraint(equalTo: choicesView.heightAnchor, multiplier: 0.875).isActive = true
    buttonStack.widthAnchor.constraint(equalTo: choicesView.widthAnchor, multiplier: 0.9).isActive = true
    buttonStack.topAnchor.constraint(equalTo: choicesView.topAnchor, constant: 15).isActive = true
    buttonStack.centerXAnchor.constraint(equalTo: choicesView.centerXAnchor).isActive = true



}

蓝色部分是包含按钮堆栈视图的视图。显示问题的可能选择是“这里”、“任何地方”、“任何地方”、“那里”,但只显示最后一个选项。我怎样才能做到这一点,以便选择在 stackview 中都是可见的,并且不会堆叠在一起?

当前功能的屏幕截图:在此处输入图像描述

标签: iosswiftxcodeuibuttonuistackview

解决方案


推荐阅读