如何让两个UIStackView扩展至视图的完整宽度？

嘿，我来帮你搞定这个布局难题！你的需求是让左右两个包含队标和队名的垂直StackView能自动填充可用宽度，同时中间的VS标签固定宽度居中，还要支持隐藏队标后队名居中对吧？咱们一步步来解决：

核心思路：用水平StackView统一管理布局 #

你之前手动给垂直StackView加leading/trailing约束的方式，会限制它的宽度无法扩展。换成水平StackView来包裹三个元素，能让Auto Layout自动帮你分配空间，这是最省心的方案。

步骤1：搭建整体布局结构 #

• 把左侧队伍的垂直StackView、VS标签、右侧队伍的垂直StackView，全部放进一个水平StackView里
• 给这个水平StackView添加约束：leading、trailing、top、bottom 分别绑定到父视图的对应边缘（可以根据设计留合适的边距，比如16pt）

步骤2：配置水平StackView的关键属性 #

• Alignment：设置为 Center，确保三个子视图垂直方向居中对齐
• Spacing：设置为你想要的左右StackView和VS之间的间距（比如20pt，根据你的设计调整）
• Distribution：设置为 Fill，让水平StackView自动分配剩余空间给子视图

步骤3：设置各子视图的优先级与约束 #

• VS标签：
  • 保留你已经设置的固定宽度约束（比如60pt）
  • 把它的横向Content Hugging Priority调整为 251（比默认的250高1），确保Auto Layout不会压缩它的宽度
• 左右垂直StackView：
  • 移除你之前添加的leading和trailing约束！这是关键，让水平StackView来控制它们的位置和宽度
  • 把它们的横向Content Hugging Priority保持默认的 250，允许Auto Layout拉伸它们以填充可用空间
  • 把垂直StackView的Alignment设置为 Center，这样当你隐藏ImageView时，队名Label会自动在StackView内居中

步骤4：适配长队名的优化 #

• 给队名Label设置Line Break Mode为 Word Wrap 或者 Truncating Tail，并开启Number of Lines为0（允许多行显示），避免长队名挤压布局

为什么之前的方法失效？ #

• 直接给垂直StackView加leading/trailing约束：Auto Layout会优先满足精确的位置约束，导致StackView只能紧贴内容宽度，无法扩展
• 使用>=类型的约束：虽然允许StackView变宽，但没有强制它填满可用空间，所以它还是会默认紧贴内容，除非有其他约束推动它拉伸

这样设置后，你的布局就能完美匹配目标UI了：左右StackView会自动填充VS标签之外的所有可用宽度，隐藏队标时队名居中，长队名也能正常适配~

内容的提问来源于stack exchange，提问作者Lucas P.