为Scroll View添加等比例宽度子视图，解决滚动偏移居中问题

嘿，这个场景我做项目时也踩过一模一样的坑！问题根源在于Scroll View的特殊布局逻辑：它有两个核心的Layout Guide——Frame Layout Guide（对应可见区域的尺寸）和Content Layout Guide（对应内容滚动区域的尺寸）。你之前给Stack View设置的80%宽度约束，大概率是绑定到了Scroll View本身或者它的Content Layout Guide上，而滚动时Content Layout Guide的宽度会随内容动态变化，这就导致了滚动越久偏移越明显的问题。

下面给你两个靠谱的解决方案，选哪个看你的布局复杂度：

方案一：用居中容器视图包裹子内容（推荐，布局更稳定） #

这是最稳妥的方式，相当于给Scroll View的内容加了一个"锚点容器"：

• 给Scroll View添加一个子视图（可以命名为ContainerView）
• 给ContainerView设置以下约束：
  • 顶部、底部、左、右边缘都和Scroll View的Content Layout Guide对齐（保证容器能撑满Scroll View的内容区域）
  • 宽度等于Scroll View的Frame Layout Guide的宽度（关键！让容器宽度始终和Scroll View的可见区域一致）
  • 可选：给容器加一个height >= ScrollView.frameLayoutGuide.height的约束，避免内容过少时容器高度不足
• 把你的三个子视图（包括带Label的Stack View）都放到ContainerView里
• 给带Label的Stack View设置：
  • 宽度等于ContainerView.width * 0.8
  • 水平居中对齐ContainerView

这样滚动时，ContainerView的宽度永远和Scroll View的可见宽度绑定，Stack View的80%宽度就会基于这个稳定的宽度，自然不会出现偏移，所有子视图也能始终保持居中。

方案二：直接修改Stack View的约束参照 #

如果不想额外加容器，也可以直接调整约束的绑定对象：

• 删除原来给Stack View设置的宽度约束
• 新建宽度约束：让Stack View的宽度等于Scroll View的Frame Layout Guide宽度的80%
• 给Stack View添加水平居中约束，绑定到Scroll View的Frame Layout Guide

这个方案更简洁，但要注意：如果你的Scroll View里还有其他需要撑满内容宽度的子视图，可能会和这个约束产生冲突，所以适合子视图都需要基于可见区域居中的场景。

额外注意点 #

• 不管用哪种方案，都要确保你在Storyboard里启用了Scroll View的两个Layout Guide（在属性面板里勾选"Content Layout Guide"和"Frame Layout Guide"）；如果是代码创建，直接用scrollView.contentLayoutGuide和scrollView.frameLayoutGuide即可。
• 测试时可以滚动到最底部，检查子视图的位置是否始终居中，有没有偏移情况。

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