如何为SwiftUI拖拽手势后的弹簧动画添加平滑吸附与边界限制？

核心问题 #

1. 目标吸附位置计算错误：
   你当前的snapBottom错误叠加了safeAreaInsets.top和bottom到geometry.size.height上——在.ignoresSafeArea()作用下，geometry.size.height已经包含了屏幕全部高度（包括安全区域），额外叠加会导致目标位置超出屏幕边界。

2. 拖拽过程未限制position变量：
   仅在视图的.position()中对position做clamp，而position变量本身在拖拽时会被设置为未限制的手势位置值，动画时直接使用这个未限制的值会导致视图临时超出屏幕。

3. Velocity丢失方向信息：
   取绝对值计算velocity会丢失手势的方向，弹簧动画的initialVelocity需要方向（向下为正，向上为负）才能保证手势与动画的无缝过渡。

修正后的代码 #

import SwiftUI

struct ContentView: View {
    private let viewHeight: CGFloat = 100
    @State private var position: CGFloat = 100 / 2
    
    private func clamp(_ value: CGFloat, min minValue: CGFloat, max maxValue: CGFloat) -> CGFloat {
        return min(max(value, minValue), maxValue)
    }
    
    var body: some View {
        GeometryReader { geometry in
            // 正确计算吸附位置
            let snapTop: CGFloat = viewHeight / 2
            // 整个屏幕高度减去视图半高，确保视图底部贴紧屏幕底部
            let snapBottom: CGFloat = geometry.size.height - viewHeight / 2
            
            ZStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(height: viewHeight)
                    .position(x: geometry.size.width / 2, y: position)
                    .gesture(
                        DragGesture()
                            .onChanged { value in
                                // 拖拽时直接限制position的范围，避免变量值超出边界
                                position = clamp(value.location.y, min: snapTop, max: snapBottom)
                            }
                            .onEnded { value in
                                // 保留velocity的方向，除以100是为了适配弹簧动画的速度范围
                                let velocity = (value.predictedEndLocation.y - value.location.y) / 100
                                
                                withAnimation(
                                    .interpolatingSpring(
                                        stiffness: 100,
                                        damping: 6,
                                        initialVelocity: velocity
                                    )
                                ) {
                                    position = snapBottom
                                }
                            }
                    )
            }
            .ignoresSafeArea()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改点 #

• 修正snapBottom计算：直接使用geometry.size.height - viewHeight/2，确保视图吸附到底部时不会超出屏幕。
• 拖拽时限制position：在onChanged中就对position做clamp，保证变量本身始终在合法范围内，动画时不会出现异常值。
• 保留velocity方向：去掉abs()，让弹簧动画的初始速度与手势方向一致，实现更自然的无缝过渡。

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