如何向UIStackView添加视图并在屏幕宽度不足时让视图缩小？

具体实现步骤： #

1. 配置Storyboard中的UIStackView
   在Storyboard里选中你的stackView，设置以下属性：

   • Axis: Horizontal（水平方向排列）
   • Alignment: Center（子视图垂直居中）
   • Distribution: Fill（让子视图填充可用空间，空间不足时自动调整）
   • Spacing: 设置合适的间距（比如8，避免视图过度拥挤）
     同时给stackView添加布局约束：设置leading和trailing与父视图的间距（或直接绑定到父视图边缘），确保StackView的可用宽度不超过屏幕宽度；另外根据需求添加垂直方向的约束（比如垂直居中）。

2. 修改子视图的添加代码
   不要用frame初始化子视图，改用Auto Layout约束来控制尺寸，并设置合适的约束优先级：

   let subView = UIView()
   subView.backgroundColor = .gray
   
   // 设置宽度、高度约束，优先级设为750（低于系统默认的Required级别1000）
   subView.widthAnchor.constraint(equalToConstant: 50).priority = UILayoutPriority(750)
   subView.heightAnchor.constraint(equalToConstant: 50).priority = UILayoutPriority(750)
   
   // 可选：保持子视图为正方形（宽度等于高度）
   subView.widthAnchor.constraint(equalTo: subView.heightAnchor).isActive = true
   
   stackView.addArrangedSubview(subView)
   

原理说明： #

• 当添加的子视图总宽度（含间距）小于StackView的可用宽度时，因为宽度/高度约束的优先级足够高，子视图会保持50x50的尺寸，再结合StackView的Alignment: Center属性，所有子视图会在屏幕中居中显示。
• 当子视图数量过多，总宽度超出StackView的可用宽度时，由于子视图的宽度约束优先级低于StackView的内部布局优先级，系统会自动压缩子视图的宽度（如果设置了宽高相等，高度也会同步缩小），直到所有子视图能适配屏幕宽度。

如果需要固定子视图高度为50，仅允许宽度自适应，只需将高度约束的优先级改为UILayoutPriority(1000)即可。

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