SwiftUI复现WWDC24视差效果卡顿问题求助

你的卡顿问题核心是scrollTransition应用层级错误，加上固定尺寸图片、重复裁剪导致布局重绘频繁。以下是修复方案：

核心修改点 #

• 将视差过渡直接作用于Image本身，而非外层容器，减少不必要的布局计算
• 用相对容器尺寸替代固定宽高，让图片适配滚动容器
• 优化偏移量计算逻辑，避免过大固定偏移值触发性能问题

修复后的完整代码 #

struct AnimalView: View {
    let imageName: String
    
    var body: some View {
        Image(imageName)
            .resizable()
            .scaledToFill()
            .scrollTransition(.interactive, axis: .horizontal) { content, phase in
                // 基于容器相对宽度计算视差偏移，0.2可根据需求调整
                content.offset(x: phase.value * UIScreen.main.bounds.width * 0.2)
            }
            .containerRelativeFrame(.horizontal)
            .aspectRatio(2/3, contentMode: .fill)
            .clipShape(RoundedRectangle(cornerRadius: 32))
    }
}

struct ContentView: View {
    private let animals = ["1", "2", "3", "4", "5", "6"]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16) {
                ForEach(animals, id: \.self) { name in
                    AnimalView(imageName: name)
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.horizontal, 32)
        .scrollTargetBehavior(.paging)
    }
}

关键细节解释 #

1. scaledToFill + aspectRatio：保证图片按2:3比例填充容器，避免拉伸变形，比固定宽高更适配不同设备
2. 滚动过渡层级：把scrollTransition放在Image上，仅让图片产生视差偏移，容器保持稳定，大幅减少布局重绘次数
3. 相对偏移计算：用屏幕宽度比例替代固定的250，视差效果更自然，也不会因设备尺寸差异导致偏移异常
4. 移除重复裁剪：仅在AnimalView最外层做一次clipShape，避免多层裁剪带来的性能损耗

修改后，视差效果会和WWDC视频里一样流畅，同时保留分页滚动的交互逻辑。

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