SwiftUI中ScrollView搭配LazyStack滚动边缘回弹卡顿问题

问题判定 #

你遇到的是iOS 15早期版本SwiftUI的官方已知Bug，触发原因是LazyHStack/LazyVStack在处理尺寸远大于父ScrollView可展示区域的首子视图时，回弹阶段的懒加载布局判定逻辑存在缺陷，会重复触发无效布局计算占用主线程资源，最终表现为卡顿掉帧。

现象解释 #

你测试中缩小第一个视图宽度后卡顿消失，是因为该Bug的触发存在尺寸阈值：当首子视图尺寸与ScrollView尺寸的差值小于约1.2倍时，懒加载的预渲染区间不会超出系统布局缓存上限，不会触发逻辑缺陷。你使用的ScrollView宽度为350，首视图宽度400时差值为50，未达阈值；宽度450时差值为100，刚好触发阈值。

修复方案 #

• 若需要兼容iOS 15.0~15.1版本，可给LazyHStack添加固定尺寸修饰符规避问题，示例如下：

ScrollView(.horizontal) {
    LazyHStack {
        Color.red.frame(width: 450)
        Color.green.frame(width: 250)
        Color.blue.frame(width: 250)
    }
    .fixedSize(horizontal: true, vertical: false) // 新增该行修复
}
.frame(width: 350)

• 升级到Xcode 13.2.1及以上版本打包，App在iOS 15.2及以上系统运行时，该Bug已被官方修复，无需额外处理
• 复杂布局场景下，也可将尺寸过大的首子视图拆分为多个尺寸相近的子视图，从触发条件层面规避问题

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