向 stackView 添加标签时，将添加 4 个而不是 5 个标签Swift 完成代码

问题描述

我需要根据符号数组中对象的数量在屏幕上显示标签，数组中有 5 个对象，屏幕上有 4 个标签（如屏幕截图所示），有什么问题？下面附上代码

class ViewController: UIViewController {

    var symbols = ["1","2","3","4","5"]
    
    let mySpacing: CGFloat = 5.0

    let widthLabelInFormula = 50

    let formulaStackView = UIStackView()

    var symbolLabels: [UILabel] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50)
        formulaStackView.axis = .horizontal
        formulaStackView.alignment = .fill
        formulaStackView.distribution = .fillEqually
        formulaStackView.spacing = mySpacing
        formulaStackView.backgroundColor = #colorLiteral(red: 1,green: 1,blue: 1,alpha: 1)
        
        view.addSubview(formulaStackView)
    
        // add constraints
        formulaStackView.translatesAutoresizingMaskIntoConstraints = false
        formulaStackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true
        formulaStackView.topAnchor.constraint(equalTo: view.topAnchor,constant: 250).isActive = true
    
        
        addLabels(formulaStackView: formulaStackView)
    }

    func addLabels(formulaStackView: UIStackView) {
        for _ in 0 ..< symbols.count {
            addLabel(formulaStackView: formulaStackView)
        }
        print(symbolLabels.count) // 5
    }

    func addLabel(formulaStackView: UIStackView) {
        let symbolLabel = UILabel()
        symbolLabel.backgroundColor = #colorLiteral(red: 0.09019608051,green: 0,blue: 0.3019607961,alpha: 1)
        symbolLabel.textColor = #colorLiteral(red: 1.0,green: 1.0,blue: 1.0,alpha: 1.0)
        symbolLabel.textAlignment = .center
        symbolLabel.font = UIFont.systemFont(ofSize: 20)
        symbolLabel.text = "?"
        
        // add constraints
        symbolLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.translatesAutoresizingMaskIntoConstraints = false
    
        
        symbolLabels.append(symbolLabel)
        formulaStackView.addArrangedSubview(symbolLabel)
    }
}

解决方法

这里的问题是您在这一行中将堆栈视图的宽度设置为零：

let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50) // 0

您实际上可以删除上面的行和这一行：

formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true

因为 UIKit 可以自动设置。

完成代码

class ViewController: UIViewController {
    var symbols = ["1","2","3","4","5"]

    let mySpacing: CGFloat = 5.0

    let widthLabelInFormula = 50

    let formulaStackView = UIStackView()

    var symbolLabels: [UILabel] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
//        let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50)
        formulaStackView.axis = .horizontal
        formulaStackView.alignment = .fill
        formulaStackView.distribution = .fillEqually
        formulaStackView.spacing = mySpacing
        formulaStackView.backgroundColor = #colorLiteral(red: 1,green: 1,blue: 1,alpha: 1)
        
        view.addSubview(formulaStackView)

        // add constraints
        formulaStackView.translatesAutoresizingMaskIntoConstraints = false
        formulaStackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
//        formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true
        formulaStackView.topAnchor.constraint(equalTo: view.topAnchor,constant: 250).isActive = true

        
        addLabels(formulaStackView: formulaStackView)
    }

    func addLabels(formulaStackView: UIStackView) {
        for _ in 0 ..< symbols.count {
            addLabel(formulaStackView: formulaStackView)
        }
        print(symbolLabels.count) // 5
    }

    func addLabel(formulaStackView: UIStackView) {
        let symbolLabel = UILabel()
        symbolLabel.translatesAutoresizingMaskIntoConstraints = false
        symbolLabel.backgroundColor = #colorLiteral(red: 0.09019608051,green: 0,blue: 0.3019607961,alpha: 1)
        symbolLabel.textColor = #colorLiteral(red: 1.0,green: 1.0,blue: 1.0,alpha: 1.0)
        symbolLabel.textAlignment = .center
        symbolLabel.font = UIFont.systemFont(ofSize: 20)
        symbolLabel.text = "?"
        
        // add constraints
        symbolLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true

        
        symbolLabels.append(symbolLabel)
        formulaStackView.addArrangedSubview(symbolLabel)
    }
}