iOS 18中Drag Gesture阻塞ScrollView滚动的兼容修复方案问询

问题概述 #

垂直ScrollView中嵌套带左右拖动DragGesture的子视图，在iOS 15-17中可同时支持子视图拖动和ScrollView滚动，但iOS 18中拖动子视图时无法触发ScrollView滚动，仅能在子视图外拖动实现滚动。尝试.gesture、.simultaneousGesture、.highPriorityGesture均无效。

兼容iOS 17/18的修复方案 #

方案1：基于拖动方向过滤手势响应 #

修改子视图的DragGesture，仅当横向拖动分量占主导时才处理手势，垂直方向的拖动交给ScrollView：

.highPriorityGesture(
    DragGesture(minimumDistance: 5) // 设置最小拖动距离，减少误触
        .onChanged { value in
            // 判断拖动方向：横向拖动分量大于纵向时才响应
            if abs(value.translation.width) > abs(value.translation.height) {
                if value.translation.width > 0 {
                    dragOffset = value.translation
                }
            } else {
                // 垂直拖动时，不更新offset，让ScrollView接收手势
                dragOffset = .zero
            }
        }
        .onEnded { _ in
            withAnimation {
                dragOffset = .zero
            }
        }
)

方案2：使用UIKit手势识别器代理（更彻底） #

如果方案1仍有问题，可以通过UIViewRepresentable包装子视图，利用UIKit的手势识别器代理来控制手势传递：

1. 创建包装SwiftUI视图的UIViewRepresentable：

struct SwipableViewWrapper<Content: View>: UIViewRepresentable {
    let content: Content
    var onDragChanged: (CGSize) -> Void
    var onDragEnded: () -> Void
    
    func makeUIView(context: Context) -> UIHostingController<Content> {
        let controller = UIHostingController(rootView: content)
        let panGesture = UIPanGestureRecognizer(target: context.coordinator, action: #selector(context.coordinator.handlePan(_:)))
        panGesture.delegate = context.coordinator
        controller.view.addGestureRecognizer(panGesture)
        return controller
    }
    
    func updateUIView(_ uiView: UIHostingController<Content>, context: Context) {
        uiView.rootView = content
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(onDragChanged: onDragChanged, onDragEnded: onDragEnded)
    }
    
    class Coordinator: NSObject, UIGestureRecognizerDelegate {
        var onDragChanged: (CGSize) -> Void
        var onDragEnded: () -> Void
        
        init(onDragChanged: @escaping (CGSize) -> Void, onDragEnded: @escaping () -> Void) {
            self.onDragChanged = onDragChanged
            self.onDragEnded = onDragEnded
        }
        
        @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
            let translation = gesture.translation(in: gesture.view)
            if gesture.state == .changed {
                if translation.width > 0 {
                    onDragChanged(CGSize(width: translation.width, height: 0))
                }
            } else if gesture.state == .ended {
                onDragEnded()
            }
        }
        
        // 允许垂直方向的手势传递给ScrollView
        func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
            if let panGesture = otherGestureRecognizer as? UIPanGestureRecognizer {
                let velocity = panGesture.velocity(in: panGesture.view)
                // 如果是垂直方向滚动，允许同时识别
                return abs(velocity.y) > abs(velocity.x)
            }
            return true
        }
    }
}

2. 在MessageView中替换原可拖动子视图：

SwipableViewWrapper(
    content: ZStack {
        Rectangle().fill(Color.blue)
        HStack {
            Button { } label: { Text("show Image") }
            Button { } label: { Text("show Video") }
        }
    }
    .frame(height: 150),
    onDragChanged: { translation in
        dragOffset = translation
    },
    onDragEnded: {
        withAnimation {
            dragOffset = .zero
        }
    }
)
.offset(x: dragOffset.width)

补充说明 #

• 方案1更轻量，适合大多数场景，通过过滤拖动方向让ScrollView能接收垂直手势
• 方案2基于UIKit，手势控制更灵活，适合复杂场景
• 两种方案均兼容iOS 15-18，无需版本分支判断

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