SwiftUI视图同时支持拖拽与缩放时拖拽抖动问题的解决方法

问题根源 #

你当前的实现有两个核心问题导致抖动：

• 拖拽偏移直接使用DragGesture的translation，但缩放后视图的坐标系已变化，translation基于原始未缩放的坐标系，导致偏移计算和实际视图缩放比例不匹配
• 拖拽和缩放手势独立处理，没有考虑手势识别的优先级和坐标转换逻辑

修复方案 #

下面是调整后的代码，核心改动包括拆分偏移状态、适配缩放的拖拽计算、合并手势处理：

struct ImageContainer: View {
    @State private var viewModel: ViewModel = .shared
    @State private var currentZoom = 0.0
    @State private var totalZoom = 1.0
    @State private var totalOffset = CGSize.zero
    @State private var currentDragOffset = CGSize.zero

    private var currentScale: CGFloat {
        CGFloat(totalZoom + currentZoom)
    }

    var body: some View {
        viewModel.image
            .offset(x: totalOffset.width + currentDragOffset.width, y: totalOffset.height + currentDragOffset.height)
            .scaleEffect(currentScale)
            .gesture(
                SimultaneousGesture(
                    DragGesture()
                        .onChanged { value in
                            // 基于当前缩放比例修正拖拽偏移，抵消缩放对坐标系的影响
                            currentDragOffset = value.translation / currentScale
                        }
                        .onEnded { _ in
                            // 拖拽结束后合并临时偏移到总偏移
                            totalOffset += currentDragOffset
                            currentDragOffset = .zero
                        },
                    MagnifyGesture()
                        .onChanged { value in
                            currentZoom = value.magnification - 1
                        }
                        .onEnded { value in
                            totalZoom += currentZoom
                            currentZoom = 0
                        }
                )
            )
            .accessibilityZoomAction { action in
                withAnimation {
                    if action.direction == .zoomIn {
                        totalZoom += 0.5
                    } else {
                        totalZoom = max(totalZoom - 0.5, 0.5) // 限制最小缩放比例，避免缩到不可见
                    }
                }
            }
            .clipped()
    }
}

关键改动说明 #

• 偏移量拆分：totalOffset记录永久的偏移位置，currentDragOffset记录拖拽过程中的临时偏移，避免拖拽时直接修改总偏移导致的状态抖动
• 缩放适配的拖拽计算：将DragGesture的translation除以当前缩放比例currentScale，让拖拽偏移适配视图的缩放状态，解决视觉偏移和操作速度不匹配的问题
• 手势合并：用SimultaneousGesture让拖拽和缩放可以同时被识别，解决手势优先级冲突
• 缩放边界限制：在辅助功能缩放中添加最小缩放比例限制，防止视图缩到不可见

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