如何在Storyboard中设置水平StackView按首个Label宽度对齐

先看最终实现效果：

具体设置步骤全在Storyboard里可视化配置即可，不需要写额外代码：

• 先拖入一个Horizontal Stack View到目标页面，给StackView设置好基础位置约束：比如固定到父视图的顶部、左侧、右侧边距，垂直方向位置按需求定，不要给StackView加固定宽度约束，让它跟随父视图宽度自适应。
• 把两个UILabel按顺序拖入StackView的排列子视图列表：要作为宽度适配基准的Label必须放在Arranged Subviews的第一位，用来展示多行内容的Label放在第二位。
• 选中StackView，在属性检查器里配置基础属性：
  • Alignment 选择 Fill
  • Distribution 选择 Fill
  • Spacing 填入两个Label之间需要的间距数值即可
• 核心配置：调整两个Label的内容优先级，这步决定了宽度分配逻辑
  • 选中第一个基准Label，打开右侧Size检查器，找到水平方向的Content Hugging Priority，把数值从默认的250改成251；再把水平方向的Content Compression Resistance Priority从默认的750改成751。这个设置的作用是告诉自动布局系统，优先满足这个Label的内容展示宽度，不要轻易拉伸或者压缩它。
  • 选中第二个Label，把Lines属性改成0，支持自动换行，它的内容优先级保留默认值即可，不需要调整。
• 最后校验：选中第一个基准Label，确认它的Preferred Width属性是Automatic，不要手动给它设置固定宽度值，否则会失去内容自适应效果。

常见问题排查：如果运行后发现第二个Label把第一个Label挤窄了，就把第一个Label的水平Hugging、Compression Resistance优先级再调高10~20个点，只要保证它的水平优先级始终高于第二个Label，StackView就会优先把宽度分配给第一个Label到刚好能完整展示内容，剩余的宽度全部分配给第二个Label用来换行展示内容。

内容的提问来源于stack exchange，提问作者Ufuk Köşker