如何让UIStackView子视图贴边并实现间距自适应屏幕宽度？

你遇到的这个场景其实很常见，核心就是要让中间的空隙能自动填充StackView的剩余宽度，把两个子视图"推"到左右边缘。下面给你两种最实用的解决方案：

方案一：添加灵活的空白间隔视图（兼容性最强） #

这种方法适配所有iOS版本，逻辑也最直观：

• 在Item1和Item2之间插入一个普通的UIView（我们叫它spacer）
• 给这个spacer设置最低的内容拥抱优先级和最低的内容压缩抵抗优先级
• 当StackView宽度变化时，这个spacer会自动拉伸填充中间空隙，把两个子视图分别挤到左右两端

代码实现（Swift） #

let stackView = UIStackView()
stackView.axis = .horizontal
stackView.alignment = .center // 垂直方向可按需选.top/.bottom等
stackView.spacing = 8 // 可选：给子视图和spacer留最小间距

let item1 = UILabel(text: "Item1")
let item2 = UILabel(text: "Item2")
let spacer = UIView()

// 设置spacer的优先级，让它能自由拉伸/收缩
spacer.setContentHuggingPriority(.defaultLow, for: .horizontal)
spacer.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)

stackView.addArrangedSubview(item1)
stackView.addArrangedSubview(spacer)
stackView.addArrangedSubview(item2)

// 绑定StackView到父视图，确保宽度随屏幕变化
view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

Interface Builder操作步骤 #

1. 拖入一个Horizontal StackView，给它添加leading/trailing约束绑定到父视图
2. 把Item1和Item2拖进StackView
3. 在两个子视图之间插入UIView（右键点击StackView → 选择Add Arranged Subview）
4. 选中这个空白视图，在Attributes Inspector里：
   • 将Horizontal Content Hugging Priority改为250（系统最低值）
   • 将Horizontal Compression Resistance Priority改为750（系统最低值）

方案二：利用UIStackView的distribution = .equalSpacing（iOS 11+） #

如果你的APP只适配iOS 11及以上，可以直接用StackView的内置属性简化操作：

• 把StackView的distribution设置为.equalSpacing
• 确保StackView的宽度填充父视图（有leading/trailing约束）
• 注意：两个子视图不要加额外的拉伸约束，否则会干扰equalSpacing的效果

代码示例 #

let stackView = UIStackView(arrangedSubviews: [item1, item2])
stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .equalSpacing
stackView.spacing = 8 // 可选最小间距

// 同样要绑定StackView宽度到父视图
view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

至于你之前设置大间距导致Item2超出屏幕的问题：因为直接设置spacing是固定值，StackView会严格遵循这个间距，不会自动调整；而上面两种方法都是让中间空隙自适应剩余空间，所以不会出现子视图溢出的情况。

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