SwiftUI Carousel自定义拖动手势偏移复位问题如何解决？

• 没有保存上一次拖动结束后的偏移状态：每次触发新手势时，translation.width 是相对于当前手势起点的位移值，没有叠加之前的偏移量，就会出现每次拖动先复位到0的问题
• 错误叠加了startLoc.x数值：startLocation是触摸点在当前视图坐标系的绝对坐标，正常屏幕下这个值本来就有几百像素，直接加上后自然会出现初始偏移固定在500左右的异常

直接调整手势逻辑，新增一个变量存储上一次拖动结束的偏移量即可，修改后的代码如下：

struct ScrollItem: View {
    @Binding var offset: CGFloat
    // 存储上一次拖动结束后的偏移量
    @State private var lastOffset: CGFloat = 0
    
    var body: some View {
        HStack(spacing: 10){
            ForEach(0..<7){_ in
                RoundedRectangle(cornerRadius: 10)
                    .frame(width: 200, height: 150)
            }
        }
        .offset(x: offset)
        .gesture(
            DragGesture()
                .onChanged({ val in
                    // 直接叠加上次偏移和当前手势位移即可，不需要加startLoc.x
                    offset = lastOffset + val.translation.width
                })
                .onEnded({ val in
                    // 拖动结束后更新lastOffset为当前偏移量，为下一次拖动做准备
                    lastOffset = offset
                    
                    // 后续要加snap吸附效果的话，可以在这里计算目标对齐位置，修改offset和lastOffset即可
                    // 示例吸附逻辑：单张卡片宽度+间距是210，计算最接近的整数倍偏移
                    // let cardWidth: CGFloat = 210
                    // let targetIndex = round(offset / -cardWidth)
                    // offset = targetIndex * -cardWidth
                    // lastOffset = offset
                })
        )
        // 建议把动画绑定到offset变化，避免手势拖动过程中出现延迟
        .animation(.easeInOut, value: offset)
    }
}

如果想要更稳定的手势交互，可以使用SwiftUI的GestureState来管理拖动过程中的临时偏移，系统会自动在手势结束时重置状态，避免手动维护状态的异常：

struct ScrollItem: View {
    @Binding var offset: CGFloat
    @GestureState private var dragOffset: CGFloat = 0
    
    var body: some View {
        HStack(spacing: 10){
            ForEach(0..<7){_ in
                RoundedRectangle(cornerRadius: 10)
                    .frame(width: 200, height: 150)
            }
        }
        .offset(x: offset + dragOffset)
        .gesture(
            DragGesture()
                .updating($dragOffset, body: { value, state, _ in
                    state = value.translation.width
                })
                .onEnded({ val in
                    offset += val.translation.width
                    // 同样可以在这里加snap吸附逻辑
                })
        )
        .animation(.easeInOut, value: offset)
    }
}

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