Swift-无法对齐具有不同字体大小的堆栈元素

如何解决Swift-无法对齐具有不同字体大小的堆栈元素

我有2个UILabel，如下所示：

private lazy var titleLabel: UILabel = {
    let label = UILabel()
    label.textColor = Constants.mainFontColor.withAlphaComponent(0.7)
    label.translatesAutoresizingMaskIntoConstraints = false
    label.isUserInteractionEnabled = false
    label.sizeToFit()
    return label
}()

private lazy var valueLabel: UILabel = {
    let label = UILabel()
    label.textColor = Constants.mainFontColor
    label.translatesAutoresizingMaskIntoConstraints = false
    label.isUserInteractionEnabled = false
    label.sizeToFit()
    return label
}()

然后将这些标签放入UIStackView：

private lazy var stackView: UIStackView = {
    let stack = UIStackView(arrangedSubviews: [titleLabel,valueLabel])
    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.axis = .horizontal
    stack.spacing = 5
    stack.alignment = .firstBaseline
    addSubview(stack)
    return stack
}()

然后我创建了几个这样的实例：

private lazy var flightNumber: FuelSheetHeaderField = {
    return FuelSheetHeaderField(title: FuelSheetStringsField.flightNumber.title.localized,value: viewModel.flightNumber,titleFontSize: 17,valueFontSize: 24)
}()

然后将这些放置到单独的堆栈视图中：

   private lazy var flightData: UIStackView = {
        let stack = UIStackView(arrangedSubviews: [flightNumber,aircraftReg,dateTime,origin])
        stack.axis = .horizontal
        stack.distribution = .equalSpacing
        stack.spacing = Constants.standardHorizontalStackSpacing
        return stack
    }()

标题标签的字体大小为12，而值的字体大小为17。除了一个自定义的字体大小分别为17和2的标签。我正在尝试使所有元素沿同一基准线对齐。我添加了以下约束：

titleLabel.firstBaselineAnchor.constraint(equalTo: valueLabel.firstBaselineAnchor),

但是效果如下：

大多数堆栈元素都对齐，但是您可以看到第一个字体较大的元素位于第二个之上。这让我有些疯狂。我该如何解决它，以便堆栈中的所有元素都沿着同一基线对齐。

解决方法

我认为您将无法在堆栈视图中使用基线。

一个选项（不确定是否对您有用）是将所有标签放在单个水平堆栈视图中，并使用.setCustomSpacing()来调整标签之间的间距。

例如：

并带有Debug -> View Debugging -> Show View Frames：

这是我用来生成该代码的代码：

class AlignedStackViewController: UIViewController {

    let detailsStack: UIStackView = {
        let v = UIStackView()
        v.axis = .vertical
        v.alignment = .leading
        v.distribution = .fill
        v.spacing = 12
        return v
    }()
    
    let dataStack: UIStackView = {
        let v = UIStackView()
        v.axis = .horizontal
        v.alignment = .firstBaseline
        v.distribution = .fill
        v.spacing = 5
        return v
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor(red: 0.928,green: 0.973,blue: 1.0,alpha: 1.0)

        let fdLabel = UILabel()
        fdLabel.text = "FLIGHT DETAILS"
        
        detailsStack.addArrangedSubview(fdLabel)
        detailsStack.addArrangedSubview(dataStack)
        
        detailsStack.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(detailsStack)
        
        // respect safe area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            // position stack view at 40,100
            detailsStack.leadingAnchor.constraint(equalTo: g.leadingAnchor,constant: 40.0),detailsStack.topAnchor.constraint(equalTo: g.topAnchor,constant: 100.0),])
        
        addLabelPair(with: "#",value: "VS0105",titleFontSize: 17,valueFontSize: 24)
        addLabelPair(with: "Reg:",value: "GAAAA",titleFontSize: 12,valueFontSize: 17)
        addLabelPair(with: "Departure:",value: "09 Sep 2020",valueFontSize: 17)
        addLabelPair(with: "at",value: "08:34",valueFontSize: 17)

        updateStackSpacing()

    }
    
    func updateStackSpacing() -> Void {
        // make sure stack has been filled
        guard dataStack.arrangedSubviews.count == 8 else {
            return
        }
        // verbose for clarity
        let flightNumberLabel = dataStack.arrangedSubviews[1]
        let aircraftRegLabel = dataStack.arrangedSubviews[3]
        dataStack.setCustomSpacing(12,after: flightNumberLabel)
        dataStack.setCustomSpacing(12,after: aircraftRegLabel)
    }
    
    func addLabelPair(with title: String,value: String,titleFontSize: CGFloat,valueFontSize: CGFloat) -> Void {
        
        let tLabel = UILabel()
        let vLabel = UILabel()
        
        tLabel.font = UIFont.systemFont(ofSize: titleFontSize)
        vLabel.font = UIFont.systemFont(ofSize: valueFontSize)
        
        tLabel.textColor = UIColor.black.withAlphaComponent(0.7)
        vLabel.textColor = UIColor.black

        tLabel.text = title
        vLabel.text = value
        
        dataStack.addArrangedSubview(tLabel)
        dataStack.addArrangedSubview(vLabel)
        
    }

}

,

我认为，似乎uiLabel具有默认填充

默认填充值取决于字体大小。

尽管有sizeToFit，结果还是一样