SwiftUI实现透明按钮：响应触摸并传递拖拽手势至底层视图

要实现透明叠加按钮既能响应单点触摸，又不干扰底层SpriteKit的pan手势，核心是精细区分触摸类型，只拦截点击事件，把拖拽/平移事件透传给底层视图。直接用SwiftUI的手势做不到这种粒度的控制，得借助UIKit的触摸响应链来实现。

具体步骤如下：

1. 自定义UIView处理触摸逻辑 #

先写一个UIView子类，它会判断触摸是点击（位移小、时长短）还是拖拽，只在点击时触发回调，否则把事件传递给下一个响应者（也就是底层的SpriteKit视图）：

import UIKit

class TapOnlyView: UIView {
    // 点击回调
    var onTap: (() -> Void)?
    
    // 判断拖拽的位移阈值，可根据需求调整
    private let dragThreshold: CGFloat = 10
    private var startTouchPoint: CGPoint = .zero
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        // 记录触摸起始点
        startTouchPoint = touches.first?.location(in: self) ?? .zero
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesMoved(touches, with: event)
        let currentPoint = touches.first?.location(in: self) ?? .zero
        let distance = hypot(currentPoint.x - startTouchPoint.x, currentPoint.y - startTouchPoint.y)
        
        // 如果位移超过阈值，判定为拖拽，把事件传递给底层视图
        if distance > dragThreshold {
            next?.touchesMoved(touches, with: event)
        }
    }
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        let currentPoint = touches.first?.location(in: self) ?? .zero
        let distance = hypot(currentPoint.x - startTouchPoint.x, currentPoint.y - startTouchPoint.y)
        
        // 位移小于阈值，判定为点击，触发回调
        if distance <= dragThreshold {
            onTap?()
        } else {
            // 否则把结束事件也传递下去
            next?.touchesEnded(touches, with: event)
        }
    }
    
    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        next?.touchesCancelled(touches, with: event)
    }
}

2. 包装成SwiftUI可用的View #

把上面的UIView转成UIViewRepresentable，让SwiftUI能直接使用：

import SwiftUI

struct TapOnlyButton: UIViewRepresentable {
    var onTap: () -> Void
    
    func makeUIView(context: Context) -> TapOnlyView {
        let view = TapOnlyView()
        view.onTap = onTap
        // 设置视图透明
        view.backgroundColor = .clear
        return view
    }
    
    func updateUIView(_ uiView: TapOnlyView, context: Context) {
        uiView.onTap = onTap
    }
}

3. 在SwiftUI中使用 #

把这个自定义按钮叠加在SpriteKit视图上方，示例如下：

import SwiftUI
import SpriteKit

// 包装SpriteKit视图
struct SpriteKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> SKView {
        let skView = SKView()
        let scene = SKScene(size: skView.bounds.size)
        scene.backgroundColor = .lightGray
        
        // 添加pan手势处理器（模拟你的SpriteKit自带pan处理）
        let panGesture = UIPanGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handlePan(_:)))
        skView.addGestureRecognizer(panGesture)
        
        skView.presentScene(scene)
        return skView
    }
    
    func updateUIView(_ uiView: SKView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject {
        @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
            let translation = gesture.translation(in: gesture.view)
            print("SpriteKit pan gesture detected: \(translation)")
            gesture.setTranslation(.zero, in: gesture.view)
        }
    }
}

// 主视图
struct ContentView: View {
    var body: some View {
        ZStack {
            // 底层的SpriteKit视图
            SpriteKitView()
            
            // 叠加的透明按钮，放在右上角
            TapOnlyButton {
                print("叠加按钮被点击了！")
            }
            .frame(width: 100, height: 100)
            .position(x: UIScreen.main.bounds.width - 60, y: 60)
            // 测试时可加半透明背景，实际使用时去掉
            .background(Color.red.opacity(0.1))
        }
    }
}

关键逻辑说明 #

• TapOnlyView通过判断触摸位移是否超过阈值，区分点击和拖拽：位移小则触发点击回调，否则把事件传递给next响应者（底层的SpriteKit视图）。
• 借助UIKit的触摸响应链，底层的SpriteKit手势能正常接收pan事件，不会被叠加层拦截。
• 叠加层可设置完全透明，不影响底层视图的显示效果。

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