SwiftUI ScrollView设置步进式滚动：每次滚动500像素并带动画

核心实现思路 #

通过绑定ScrollView的滚动位置来追踪和控制当前偏移量，每次触发滚动操作时，在现有偏移量基础上累加500像素，并用动画包裹偏移量更新，实现平滑滚动效果。

完整代码示例 #

import SwiftUI

struct StepScrollDemo: View {
    // 绑定滚动位置，初始偏移量为0
    @State private var currentOffset: CGFloat = 0
    
    var body: some View {
        VStack {
            // 触发滚动的按钮，可替换为手势等其他交互
            Button("向下滚动500像素") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    currentOffset += 500
                }
            }
            .padding()
            
            ScrollView {
                // 长内容示例，确保有足够滚动空间
                VStack(spacing: 20) {
                    ForEach(0..<20) { index in
                        Text("第 \(index + 1) 个区块")
                            .font(.title)
                            .frame(maxWidth: .infinity)
                            .padding(40)
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(10)
                    }
                }
                .padding()
                // 将滚动位置绑定到偏移量变量
                .scrollPosition(id: $currentOffset, anchor: .top)
            }
        }
    }
}

#Preview {
    StepScrollDemo()
}

关键细节说明 #

• scrollPosition(id:anchor:)：该修饰符用于绑定ScrollView的滚动偏移量，这里用CGFloat类型的变量直接对应滚动像素值，anchor: .top表示滚动后新位置的顶部与ScrollView顶部对齐。
• withAnimation：包裹偏移量更新操作，让滚动过程以指定动画（示例用了easeInOut过渡、0.5秒时长）平滑完成，可根据需求调整动画类型和时长。
• 触发逻辑：示例用按钮触发滚动，你可以替换为轻扫、长按等手势，只要在触发时执行currentOffset += 500并包裹动画即可。

注意事项 #

• 确保ScrollView内的内容总高度足够（至少大于ScrollView可视高度 + 多次滚动的总像素），否则滚动到内容底部后再触发不会有效果。
• 如果需要支持向上滚动，添加对应交互并执行currentOffset -= 500即可。

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