ScrollingStackViewController避坑指南子视图控制器如何设置垂直自撑约束才不乱版【免费下载链接】ScrollingStackViewControllerA view controller that uses root views of child view controllers as views in a UIStackView.项目地址: https://gitcode.com/gh_mirrors/sc/ScrollingStackViewController如果你正在用ScrollingStackViewController搭建 iOS 滚动页面却遇到子区域高度变成 0、内容被压缩、段与段互相挤压等乱版问题这篇文章就是为你写的。ScrollingStackViewController 是一个由 Just Eat 开源的 iOS 滚动容器视图控制器它把每个子视图控制器Child View Controller的根视图当作垂直 UIStackView 里的一个区块来排列配合 UIScrollView 实现滚动非常适合分段数量有限、每段内容复杂的页面比如订单详情页。下面用大白话讲清楚垂直自撑约束到底怎么设才永远不会乱版ScrollingStackViewController 是什么解决什么问题先用一句话理解它的工作方式一个UIScrollView负责滚动一个垂直的UIStackView负责把各个子视图控制器的视图从上到下排好你只管add(viewController:)把子控制器塞进去不用写任何数据源、cell 复用、index 管理。相比UITableViewController它不用cellForRowAt那套机制也不用在 index 和显隐之间来回算索引代码更干净动画也更自然。核心源码只有 ScrollingStackViewController.swift 一个文件可维护性很好。为什么子区域会乱版先看懂高度从哪来这是整篇文章最关键的一点 StackView 的宽度是被锁定为和 ScrollView 一样宽的源码里通过widthAnchor约束实现但 StackView不会替子视图决定高度——每个区块的高度完全来自子视图自身的固有内容尺寸intrinsic content size。⚠️ 一句话原则子视图控制器必须自己用约束链算出自己的高度否则 StackView 只能给你 0 或一个被压缩的高度。README 里也特意用加粗强调了这一点Make sure your child view controllers have constraints to self-size vertically.确保子视图控制器有垂直自撑约束。乱版的三种典型症状对号入座一下症状大概率原因子区域高度是 0内容看不见垂直方向约束链断了视图算不出高度子区域被压扁、文字截断视图对垂直方向的压缩抵抗Compression Resistance优先级太低两个区块抢高度、动画错位内容撑开优先级Content Hugging设置反了或子视图用了固定高度又期望它自适应唯一不会乱的垂直自撑约束公式无论你的子控制器里是 Label、Button、图片还是嵌套的 StackView记住这一条约束链就够了视图顶部安全区顶部 ↓ 子控件 A ↓间距约束 子控件 B ↓ 最后一个子控件 ↓ 视图底部安全区底部要点从视图顶部一路用 top/leading/底到顶 的约束链连到最后一个子控件再让最后一个子控件的底部约束到视图底部这样视图高度 内容高度就成立了。官方示例的 SegmentController 场景 就是这么做的内部一个垂直 StackView四条约束分别钉住安全区的 top、bottom、leading、trailing其中bottom 这一条就是自撑的关键——它告诉 Auto Layout我的高度由内容决定内容有多高我就多高。在 Interface Builder 里的直观做法选中子控制器的根视图确认Size Options里垂直方向是 Hugging贴住内容而不是被固定死的高度用 Auto Layout 的Add Missing Constraints检查是否还有垂直方向未约束的警告运行前用控制台看一眼只要没有Unable to simultaneously satisfy constraints之类的竖排警告约束链就是闭环的。最容易踩的 4 个坑逐一排雷 ️坑 1只约束了顶部忘了底部内容只钉在视图顶部底部悬空 → 视图高度无法推导直接塌成 0。修复补上最后一个子控件底部 → 视图底部这条约束。坑 2给子视图直接加了固定 height 约束内容一旦变长长文案、多语言、动态图片区块就不动了看起来像乱版。动态内容请让约束链自撑只有内容恒定如固定 44pt 按钮才允许固定高度。坑 3Label 没设压缩抵抗被相邻区块挤扁子视图里的 Label、Button 保持默认优先级即可不要随手把垂直方向的 Content Compression Resistance Priority 调到 500 以下否则内容会被压成一条缝。坑 4用 edgeInsets 加边距后show/hide 行为不一样add(viewController:edgeInsets:)会把子视图包进一层容器视图再加边距源码见 insert 方法中containerView的逻辑。官方提醒这种带边距的子视图建议配合show/hide来控制显隐因为隐藏逻辑作用在容器视图上动画效果最自然。另外一个好习惯所有打算用的子控制器一次性全部 add 进去然后按需 show/hide比反复 insert/remove 更省事也避免 index 错乱——示例工程 ViewController.swift 就是这样写的。进阶分隔线、滚动到指定区块、动画定制排完乱版之后这几个配置能让页面质感立刻上来分隔线spacingColor设成浅灰 stackView.spacing 0.5就能得到 hairline 分隔效果边框borderColor/borderWidth两个属性即可编程滚动到某个区块scrollTo(viewController:)带弹簧动画还能传 completion 回调自定义动画重写animate闭包替换默认 0.5s 弹簧动画改滚动动画则重写scrollAnimate。这些属性都直接暴露在ScrollingStackViewController上不需要额外继承就能用。快速上手与资料入口集成方式二选一要求 iOS 12CocoaPodsPodfile 中加一行pod ScrollingStackViewController见 PodfileSwift Package Manager在工程设置里添加本仓库包即可入口描述见 Package.swift。想动手验证本文所有结论推荐直接跑示例工程关键文件示例主控制器ViewController.swift子控制器写法SegmentController.swift完整 Storyboard注意 SegmentController 的四条约束Main.storyboard单元测试ScrollingStackViewTests.swift最后把全文浓缩成一句口诀宽度交给 StackView 管高度自己用约束链撑顶部钉住、底部闭合、中间不留断链——做到这三点ScrollingStackViewController 的页面永远不会乱版 ✅【免费下载链接】ScrollingStackViewControllerA view controller that uses root views of child view controllers as views in a UIStackView.项目地址: https://gitcode.com/gh_mirrors/sc/ScrollingStackViewController创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考