swift - 如何以编程方式构建 UIStackView 网格并在按下按钮时更改 UILabel？

Question

我需要尝试使用 UIStackView 为我的计算器按钮构建网格布局。我创建了一个数组来相应地生成按钮。

我找到了这个question ，这确实对我有帮助，但我不需要重复按钮标签，而是需要为每个数组项生成一个按钮。

这是目前该应用程序的屏幕截图:Wrong layout

这是所需的布局:enter link description here

我有两个问题:

1) 如何使网格元素仅包含唯一的数组项，而不是每行重复与按钮标题相同的项？

2) 如何将第一个按钮 amountDisplayLabel 的 UILabel 设置为单击(按下)的按钮？

这是我一直在尝试的代码:

class StackViewGridController: UIViewController {
let numberLabel = UILabel()

let numberKeysArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", ".", ""]
override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    stackedGrid(rows: 4, columns: 1, rootView: view)
    print(numberLabel)
}
@objc func onButton(button: UIButton){
    let result = button.currentTitle ?? ""
    numberLabel.text = result
    print(result)
}

let amountDisplayLabel: UILabel = {
    let label = UILabel()

    label.backgroundColor = .green
    return label
}()

func stackedGrid(rows: Int, columns: Int, rootView: UIView){
    amountDisplayLabel.text = numberLabel.text

    // Init StackView
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.alignment = .fill
    stackView.distribution = .fillEqually
    stackView.spacing = 5
    stackView.addArrangedSubview(amountDisplayLabel)
    for i in 1...numberKeysArray.count {
        let horizontalSv = UIStackView()
        horizontalSv.axis = .horizontal
        horizontalSv.alignment = .fill
        horizontalSv.distribution = .fillEqually
        horizontalSv.spacing = 5

        for _ in 1...columns {
            let button = UIButton()
            button.backgroundColor = .orange
            button.setTitle("\(i)", for: .normal)
            button.addTarget(self, action: #selector(onButton), for: .touchUpInside)
            horizontalSv.addArrangedSubview(button)
            amountDisplayLabel.text = button.currentTitle
        }
        stackView.addArrangedSubview(horizontalSv)

    }
    rootView.addSubview(stackView)

    fitParenLayout(stackView, parentView: rootView)
}
func fitParenLayout(_ child: UIView, parentView: UIView){
    amountDisplayLabel.bottomAnchor.constraint(equalTo: child.topAnchor)
    child.defineAnchors(top: parentView.safeTopAnchor, left: parentView.safeLeftAnchor, bottom: nil, right: parentView.safeRightAnchor, paddingTop: 10, paddingLeft: 10, paddingBottom: 10, paddingRight: 10)
}

}

谢谢

Answer 1

这是您的解决方案

import UIKit

class StackViewGridController: UIViewController {

    let numberKeysArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", ".", "="]

    let mySpacing: CGFloat = 5.0

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        stackedGrid(rows: 4, columns: 3, rootView: view)
    }

    @objc func onButton(button: UIButton){
        amountDisplayLabel.text = button.currentTitle ?? ""
    }

    let amountDisplayLabel = UILabel()

    func stackedGrid(rows: Int, columns: Int, rootView: UIView){

        // Init StackView
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = mySpacing

        amountDisplayLabel.backgroundColor = .green
        stackView.addArrangedSubview(amountDisplayLabel)

        for row in 0 ..< rows {
            let horizontalSv = UIStackView()
            horizontalSv.axis = .horizontal
            horizontalSv.alignment = .fill
            horizontalSv.distribution = .fillEqually
            horizontalSv.spacing = mySpacing

            for col in 0 ..< columns {
                let button = UIButton()
                button.backgroundColor = .orange
                button.layer.cornerRadius = 6
                button.setTitle("\(numberKeysArray[row*columns + col])", for: .normal)
                button.addTarget(self, action: #selector(onButton), for: .touchUpInside)
                horizontalSv.addArrangedSubview(button)
            }
            stackView.addArrangedSubview(horizontalSv)
        }

        rootView.addSubview(stackView)

        // add constraints
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: rootView.topAnchor, constant: mySpacing).isActive = true
        stackView.leftAnchor.constraint(equalTo: rootView.leftAnchor, constant: mySpacing).isActive = true
        stackView.rightAnchor.constraint(equalTo: rootView.rightAnchor, constant: -mySpacing).isActive = true
        stackView.bottomAnchor.constraint(equalTo: rootView.bottomAnchor, constant: -mySpacing).isActive = true
    }
}