ios - 为具有等宽标签的水平 StackView 添加分隔 View

Question

我试图在stackview中设置固定宽度的标签，并在标签之间有一个分隔符。

但是，我尝试了许多变体，但无法将其准确放置。

下面是我使用的代码和屏幕截图，但想知道是否有更好的东西？我尝试使用压缩和阻力，但它没有按照我想要的方式工作，或者我只是没有设置正确？

    let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.alignment = .fill // .Leading .FirstBaseline .Center .Trailing .LastBaseline
    stackView.distribution = .fill // .FillEqually .FillProportionally .EqualSpacing .EqualCentering

    let label = UILabel(frame: .zero)
    label.numberOfLines = 0
    label.backgroundColor = .green
    //label.setContentHuggingPriority(UILayoutPriority(999), for: .horizontal)
    //label.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.3).isActive = true
    //label.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 998), for: .horizontal)
    label.text = "Label, Label, Label Label Label Label Label Label Label Label Label"

    let label2 = UILabel(frame: .zero)
    label2.numberOfLines = 0
    label2.backgroundColor = .red
    //label2.setContentHuggingPriority(UILayoutPriority(998), for: .horizontal)
    //label2.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
    label2.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

    let label3 = UILabel(frame: .zero)
    label3.numberOfLines = 0
    label3.backgroundColor = .blue
    //label3.setContentHuggingPriority(UILayoutPriority(998), for: .horizontal)
    //label3.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
    label3.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

    let separator = UIView()
    separator.widthAnchor.constraint(equalToConstant: 1).isActive = true
    separator.backgroundColor = .black
    //separator.setContentHuggingPriority(UILayoutPriority(249), for: .horizontal)
    //separator.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 749), for: .horizontal)
    //stackView.addArrangedSubview(separator)
   //separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.6).isActive = true

    let separator2 = UIView()
    separator2.widthAnchor.constraint(equalToConstant: 1).isActive = true
    separator2.backgroundColor = .black

    stackView.addArrangedSubview(label)
    label.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true
    stackView.addArrangedSubview(separator)
    stackView.addArrangedSubview(label2)
    label2.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true
    stackView.addArrangedSubview(separator2)
    stackView.addArrangedSubview(label3)
    label3.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true

    separator.heightAnchor.constraint(equalTo: stackView.heightAnchor).isActive = true

    self.view.addSubview(stackView)

    stackView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    stackView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true
    stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 30).isActive = true

Answer 1

嘿，我建议使用 UIKitPlus library

诀窍是对所有三个标签使用相等的宽度，为此您应该将标签#2 和标签#3 的宽度链接到标签#1 的宽度。这是因为您想要它们之间的黑色分隔符 View 。

import UIKitPlus

class ThreeLabelsViewController: ViewController {
    var loremIpsumText: String { "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups." }

    lazy var text1 = Text(loremIpsumText)

    override func buildUI() {
        super.buildUI()
        body {
            HStack {
                text1.background(.green).multiline()
                HSpace(10).background(.black)
                Text(loremIpsumText).background(.red).multiline().width(to: text1)
                HSpace(10).background(.black)
                Text(loremIpsumText).background(.blue).multiline().width(to: text1)
            }
            .edgesToSuperview()
        }
    }
}

因为没有那个分隔 View ，你可以使用 StackView 的 spacing和 distribution属性来轻松地做同样的事情。

import UIKitPlus

class ThreeLabelsViewController: ViewController {
    var loremIpsumText: String { "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups." }

    override func buildUI() {
        super.buildUI()
        view.backgroundColor = .black
        body {
            HStack {
                Text(loremIpsumText).background(.green).multiline()
                Text(loremIpsumText).background(.red).multiline()
                Text(loremIpsumText).background(.blue).multiline()
            }
            .spacing(10)
            .distribution(.fillEqually)
            .edgesToSuperview()
        }
    }
}

和可见的结果是一样的