UIStackView从center切leading/trailing对齐失效、按钮宽度异常

场景说明 #

开发过程中需要根据业务逻辑动态修改垂直UIStackView的对齐方式，支持leading、trailing、center三种对齐模式。
实际测试发现：leading与trailing两种对齐方式互相切换时表现符合预期，但从center对齐切换到leading或trailing对齐时会出现布局异常。

基础配置 #

StackView初始属性设置如下：

stackView.alignment = .trailing
stackView.axis = .vertical
stackView.distribution = .fill

通过UISegmentedControl控件触发对齐方式切换，核心切换逻辑代码如下：

@IBAction func segment(_ sender: UISegmentedControl) {
    switch sender.selectedSegmentIndex {
    case 0:
        stackView.alignment = .leading
    case 1:
        stackView.alignment = .center
    case 2:
        stackView.alignment = .trailing
    default:
        break
    }
}

异常表现 #

即便已经为StackView内的按钮设置了固定宽度约束，当通过代码将对齐方式从center切换为leading或trailing时，按钮宽度仍会被自动拉伸。

问题原因 #

当垂直方向的UIStackView alignment属性设置为.center时，系统会自动为内部arranged子视图生成高优先级的水平位置约束，切换alignment属性时，部分旧的自动生成约束不会被立即清理，和手动添加的固定宽度约束产生冲突，最终导致子视图尺寸被错误拉伸。

解决方案 #

可根据实际场景选择以下任意一种方案修复：

• 方案一：切换对齐前强制刷新布局
  在修改alignment属性前主动触发StackView布局更新，清理系统自动生成的旧约束，代码修改如下：

  @IBAction func segment(_ sender: UISegmentedControl) {
      // 提前触发布局刷新，清理旧的自动约束
      stackView.setNeedsLayout()
      stackView.layoutIfNeeded()
      
      switch sender.selectedSegmentIndex {
      case 0:
          stackView.alignment = .leading
      case 1:
          stackView.alignment = .center
      case 2:
          stackView.alignment = .trailing
      default:
          break
      }
  }
  

  同时确认手动添加的按钮固定宽度约束优先级不低于999（低于required避免和系统约束强制报错），不会被StackView的自动约束覆盖。
• 方案二：调整子视图约束优先级
  去掉手动给按钮添加的固定宽度约束，将按钮的水平方向内容抗拉伸优先级（contentHuggingPriority）、内容抗压缩优先级（compressionResistancePriority）都设置为.required，让按钮基于自身固有内容尺寸确定宽度，完全由StackView的alignment属性控制位置，不会出现拉伸问题。
• 方案三：使用容器视图隔离StackView约束（最稳定）
  给每个需要固定宽度的子视图外层套一个透明的容器View，容器View作为StackView的arrangedSubview，设置为和StackView等宽；将固定宽度的按钮放在容器View内部，通过修改按钮相对于容器View的水平约束（leading/centerX/trailing）实现对齐效果。这种方式完全绕开了StackView自动生成的子视图约束，不会出现约束冲突问题，适合复杂布局场景。

内容的提问来源于stack exchange，提问作者Pradip Sutariya