Swift 中Vertical Stack View内两个Label高度不等该如何解决?
问题出现原因
这个问题本质是Vertical Stack View的排布规则和UILabel的固有内容尺寸优先级冲突导致的:
- 当你将外层Stack View的
Distribution设为Fill时,Stack View会优先满足子视图的固有内容尺寸,剩余可分配空间会优先拉伸「内容吸附优先级(Content Hugging Priority)更低」的子视图。两个未添加额外约束的Label默认优先级完全相同,系统无法判断该如何分配剩余空间,就会出现优先级歧义警告,同时随机选择其中一个Label拉伸填充剩余空间,你遇到的就是系统优先拉伸了顶部Label的情况,底部Label仅保留适配文本的最小高度。 - 当你切换为
Fill Proportionally模式时,Stack View会按照子视图固有内容尺寸的比例分配总空间,若两个Label的文本长度不同、固有高度不同,分配到的实际高度自然也会不一样,就会出现上下高度不均的问题。
实现等高布局的解决方案
不需要修改Stack View的默认配置,只需要添加一条约束即可:
- 保持外层
Vertical Stack View的Alignment = Fill、Distribution = Fill配置不变 - 同时选中上下两个UILabel,为二者添加
Equal Height(等高)约束
添加完成后,Stack View会先扣除中间两个固定高度元素(总高度42)的占用空间,剩下的所有可用空间会平均分配给两个等高的Label,中间的控件自然会处于屏幕垂直居中的位置,同时Content Priority Ambiguity警告也会因为高度关系明确自动消失。
如果需要Label支持多行文本,只需将Label的Lines属性设为0即可,不会影响等高约束的生效。
内容的提问来源于stack exchange,提问作者Kosh
相关产品推荐
相关产品推荐

