UIStackView contentHuggingPriority 不适用于填充可用空间

Posted 2023-02-27

【中文标题】UIStackView contentHuggingPriority 不适用于填充可用空间

【英文标题】：UIStackView contentHuggingPriority doesn't work for filling available space

【发布时间】：2020-12-22 22:47:53

【问题描述】：

我想创建一个聊天底栏，内容如下，水平UIStackView：

UITextField 在左侧，占用所有可用空间 右侧的标签具有固定大小（默认固有内容大小）

这是我的代码：

let messageTextField = UITextField()
messageTextField.translatesAutoresizingMaskIntoConstraints = false
messageTextField.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
messageTextField.setContentHuggingPriority(.defaultHigh, for: .horizontal)

let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "SEND"
label.setContentHuggingPriority(.defaultLow, for: .horizontal)
label.setContentCompressionResistancePriority(.required, for: .horizontal)
label.textColor = .red

let sv = UIStackView()
sv.axis = .horizontal
sv.distribution = .fill
sv.alignment = .center
sv.translatesAutoresizingMaskIntoConstraints = false

// constraint the stack view to the bottomBar view 
bottomBar.addSubview(sv)
NSLayoutConstraint.activate([
    sv.leadingAnchor.constraint(equalTo: bottomBar.leadingAnchor, constant: 20),
    sv.trailingAnchor.constraint(equalTo: bottomBar.trailingAnchor, constant: -20),
    sv.bottomAnchor.constraint(equalTo: bottomBar.bottomAnchor, constant: -8),
    sv.topAnchor.constraint(equalTo: bottomBar.topAnchor, constant: 8)
])

sv.addArrangedSubview(messageTextField)
sv.addArrangedSubview(label)

NSLayoutConstraint.activate([
    messageTextField.heightAnchor.constraint(equalTo:sv.heightAnchor),
    // I didn't put any width constraint for textField because it make no sense, as I want it to take all the available space on the right 
])

使用此代码，标签正在扩大其大小并填充右侧的所有可用空间，并且文本字段未显示（检查器说宽度 = 0）；与我想要的完全相反。

我不明白为什么它不起作用，因为我明确配置了它，所以它不会扩展标签：

label.setContentHuggingPriority(.defaultLow, for: .horizontal)

改为使用以下方式扩展文本字段：

messageTextField.setContentHuggingPriority(.defaultHigh, for: .horizontal)

我在这里错过了什么？我已经阅读了许多 SO 答案、Apple 文档，并遵循了各种教程和视频，但我无法实现这个看似简单的事情。

【问题讨论】：

您是否尝试通过注释掉 sv.distribution = .fill 和 sv.alignment = .center 来保留堆栈视图的默认值？默认情况下应该都是“填充”

刚刚尝试过，但正如您指出的那样，这些是默认值，因此无法解决问题：/

【参考方案1】：

你倒过来了……

设置Content Hugging Priority 意味着“控制这个元素如何拥抱它的内容。

因此，例如，如果您的 UILabel 中仅包含字母“A”，则高内容拥抱优先级将使标签仅与单个字母一样宽。

所以用这两行：

label.setContentHuggingPriority(.defaultLow, for: .horizontal)

messageTextField.setContentHuggingPriority(.defaultHigh, for: .horizontal)

你告诉过自动布局：

保持messageTextField 的宽度与其文本一样宽，并允许label 伸展得比其文本更宽

你想要的是：

// don't let label stretch at all
label.setContentHuggingPriority(.required, for: .horizontal)

// let message text field stretch if needed
messageTextField.setContentHuggingPriority(.defaultHigh, for: .horizontal)

然后堆栈视图将拉伸文本字段以填充可用空间。

【讨论】：

就是这样，非常感谢！我不是英语母语，我认为“拥抱”这个词的意思是“巨大”，就像“伟大”一样，因此我很困惑！

【参考方案2】：

我在模拟器 (iPhone 12) 上快速尝试了 Xcode 12.3

并将默认值留给堆栈视图和内容拥抱，对我有用：

override func viewDidLoad() 
        super.viewDidLoad()
        
        // Just added a view anchored to the bottom of the view controller for the purpose of the test
        let bottomBar = UIView()
        bottomBar.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(bottomBar)
        bottomBar.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        bottomBar.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        bottomBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        bottomBar.heightAnchor.constraint(equalToConstant: 40.0).isActive = true
        bottomBar.backgroundColor = .yellow
        
        let messageTextField = UITextField()
        messageTextField.translatesAutoresizingMaskIntoConstraints = false
        messageTextField.backgroundColor = .cyan

        // LEAVING DEFAULTS
        //messageTextField.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
        //messageTextField.setContentHuggingPriority(.defaultHigh, for: .horizontal)

        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "SEND"

        // LEAVING DEFAULTS
        //label.setContentHuggingPriority(.defaultLow, for: .horizontal)
        //label.setContentCompressionResistancePriority(.required, for: .horizontal)
        label.textColor = .red

        let sv = UIStackView()
        sv.axis = .horizontal

        // LEAVING DEFAULTS
        //sv.distribution = .fill
        //sv.alignment = .center
        
        sv.translatesAutoresizingMaskIntoConstraints = false

        // constraint the stack view to the bottomBar view
        bottomBar.addSubview(sv)
        NSLayoutConstraint.activate([
            sv.leadingAnchor.constraint(equalTo: bottomBar.leadingAnchor, constant: 20),
            sv.trailingAnchor.constraint(equalTo: bottomBar.trailingAnchor, constant: -20),
            sv.bottomAnchor.constraint(equalTo: bottomBar.bottomAnchor, constant: -8),
            sv.topAnchor.constraint(equalTo: bottomBar.topAnchor, constant: 8)
        ])

        sv.addArrangedSubview(messageTextField)
        sv.addArrangedSubview(label)

        NSLayoutConstraint.activate([
            messageTextField.heightAnchor.constraint(equalTo:sv.heightAnchor),
        ])
    

这是结果：

【讨论】：

感谢卢卡的回答。它可以工作，但布局调试器说两个排列的子视图都有不明确的大小（宽度和水平位置）。它看起来像是 UIStackView 在雄心勃勃的情况下的恢复行为。我的意思是，如果我有 4 个视图（我想在左侧添加一些按钮），如何告诉其中一个视图拉伸，而其他视图压缩？