如何用AutoLayout实现满足特定需求的动态高度UIStackView？

核心思路 #

通过动态调整图片视图的尺寸约束优先级+StackView的基础属性配置，实现有图/无图两种状态的自适应布局，同时避免压缩或占位问题。

具体设置步骤 #

1. StackView基础配置 #

• 设置StackView的Axis为Horizontal，Alignment为Bottom（满足文本与图片底部对齐），Distribution为Fill（无图时标签自动占满宽度），Spacing按需设置（比如8pt）。

2. 图片视图约束设置 #

• 添加宽度=128pt、高度=128pt的约束，将这两个约束的Priority设为999（低于系统默认的Required优先级1000）。
• 添加宽度=0pt、高度=0pt的约束，将这两个约束的Priority设为250（低优先级），默认保持激活状态。

3. 代码动态切换约束状态 #

在业务逻辑中根据是否存在图片，切换两组约束的激活状态：

// 假设对应变量已关联Storyboard中的约束和视图
if let targetImage = yourImageData {
    imageView.image = targetImage
    // 激活128尺寸约束，关闭0尺寸约束
    width128Constraint.isActive = true
    height128Constraint.isActive = true
    width0Constraint.isActive = false
    height0Constraint.isActive = false
} else {
    imageView.image = nil
    // 关闭128尺寸约束，激活0尺寸约束
    width128Constraint.isActive = false
    height128Constraint.isActive = false
    width0Constraint.isActive = true
    height0Constraint.isActive = true
}

4. 标签视图配置 #

• 设置标签的numberOfLines为0（支持多行显示），lineBreakMode为WordWrapping。
• 无需给标签设置固定宽度约束，让StackView自动分配空间：有图时标签占用剩余宽度，无图时占满StackView宽度。

方案有效性说明 #

• 有图片时，高优先级的128pt约束生效，StackView会优先保证图片尺寸，标签仅占用剩余空间，不会出现图片被压缩的情况。
• 无图片时，0尺寸约束激活，图片视图被压缩至无占位，StackView的Fill分布会让标签自动占满全部宽度。
• StackView的Alignment设为Bottom，无论标签高度是否超过图片，两者始终保持底部对齐，同时StackView高度会自动适配内容的最大高度。

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