如何使水平 StackView 具有第一个元素的宽度并填充其余元素

Question

我是 swift 的新手，目前正在尝试创建一个输入字段。我的问题是，我想要一个如图所示的标签：

到目前为止，我正在使用 StackViews：一个垂直的用于输入字段，三个水平的用于标题和用户输入。到目前为止我的代码如下：

// Initialize outter stackview
    let feedbackOutterSV = UIStackView()
    view.addSubview(feedbackOutterSV)
    feedbackOutterSV.translatesAutoresizingMaskIntoConstraints = false
    feedbackOutterSV.axis = NSLayoutConstraint.Axis.vertical
    NSLayoutConstraint.activate([
        feedbackOutterSV.topAnchor.constraint(equalTo: tutorialText.bottomAnchor, constant: 10),
        feedbackOutterSV.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        feedbackOutterSV.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        feedbackOutterSV.heightAnchor.constraint(equalToConstant: 300)
    ])

    // Initalize inner stackview for title
    let feedbackInnerSVTitle = UIStackView()
    feedbackOutterSV.addArrangedSubview(feedbackInnerSVTitle)
    feedbackInnerSVTitle.translatesAutoresizingMaskIntoConstraints = false
    feedbackInnerSVTitle.axis = .horizontal
    feedbackInnerSVTitle.alignment = .fill
    feedbackInnerSVTitle.distribution = .fillProportionally

    let titleLabel = UILabel()
    feedbackInnerSVTitle.addArrangedSubview(titleLabel)
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    titleLabel.text = "feedback.input.title".localize()
    titleLabel.font = UIFont.preferredFont(forTextStyle: .body)
    titleLabel.textColor = .gray

    let titleTextView = UITextView()
    feedbackInnerSVTitle.addArrangedSubview(titleTextView)
    titleTextView.translatesAutoresizingMaskIntoConstraints = false
    titleTextView.font = UIFont.preferredFont(forTextStyle: .body)
    titleTextView.isScrollEnabled = false

    NSLayoutConstraint.activate([
        titleLabel.widthAnchor.constraint(equalToConstant: 39)
    ])

这段代码给出了英语的预期输出，但是我必须用不同的语言来实现它，所以我不能使用恒定的宽度。

谁能告诉我如何更改我的代码，这样我就不需要常量约束，而是将 Label 的宽度调整为单词的长度？

提前致谢

Answer 1

我认为你可以使用NSLayoutConstraint.activate([ titleLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)]让它根据内容增长

Answer 2

在您的代码中，titleLabel 上的 width constraint 必须设置为 titleLabel.intrinsicContentSize.width

NSLayoutConstraint.activate([
   titleLabel.widthAnchor.constraint(equalToConstant: titleLabel.intrinsicContentSize.width)
])

另外，将feedbackInnerSVTitle的distribution设为.fill

feedbackInnerSVTitle.distribution = .fill

Answer 3

两件事...

我假设您希望 "title label" 与您的 textView 一起成为 top-aligned，因此将 .fill 更改为 .top:

    feedbackInnerSVTitle.alignment = .top // .fill

并且，不要使用 .fillProportionally

    feedbackInnerSVTitle.distribution = .fill // .fillProportionally

现在，您可能会看到每个元素占据 50% 的宽度，因此请更改标题标签的 content hugging 优先级：

    titleLabel.setContentHuggingPriority(.required, for: .horizontal)

最后，不要在标题标签上设置宽度限制：

//      NSLayoutConstraint.activate([
//          titleLabel.widthAnchor.constraint(equalToConstant: 39)
//          ])

结果：

如何使水平 StackView 具有第一个元素的宽度并填充其余元素

How to make a horizontal StackView to have the first element's width and fill the rest of it

ios

swift

uistackview