Xcode运行模拟器时StackView、ImageView与Label间出现超大间距如何解决

问题背景 #

使用Xcode开发Swift项目搭建UI时，Storyboard画布中界面预览完全正常，模拟器运行后，Top Navigation Stack View、Detailed Image View和Title Label三个控件之间出现不符合预期的超大间距，已核对所有相关StackView的属性配置未发现明显错误。

根因定位 #

该问题由UIStackView的自动填充逻辑导致：
当外层StackView的总高度大于其内部所有子视图的固有内容高度之和时，若StackView的Distribution属性设置为Fill、Fill Proportionally或Equal Spacing，系统会自动将多余的高度空隙分配给内容压缩抵抗优先级最低的子视图，或者直接在子视图之间插入额外空隙。
你的场景中Detailed Image View未设置显式高度约束，图片的垂直内容压缩抵抗优先级低于文本类控件，因此多余高度全部被分配到了Image View的自身高度或者相邻间隔中，最终表现为超大间距。

可行方案 #

你当前使用的显式设置Detailed Image View高度为520的方案可满足全机型适配需求，若需要更灵活的适配效果，可选择以下优化方案：

• 给Detailed Image View添加Aspect Ratio（宽高比）约束，值和图片原比例保持一致，图片高度会随屏幕宽度自动等比例缩放，不会出现拉伸也不会产生多余空隙
• 调高Detailed Image View的垂直方向内容压缩抵抗优先级（Content Compression Resistance Priority）到1000，优先级高于其他文本控件，系统就不会将多余空隙分配到图片相关区域
• 将外层Main Stack View的Distribution属性改为Fill，同时给StackView添加高度≤父视图高度的约束，多余高度留作父视图空白，不会分配到StackView内部的子控件间隔中

额外检查建议 #

• 确认所有相关StackView的Spacing属性已设置为20~30的固定值，未启用动态间距
• 检查所有控件的垂直约束是否存在冗余，避免多添加了额外的Margin类约束

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