SwiftUI中VStack绑定Tap手势后UIButton点击失效的解决方法

问题场景 #

在SwiftUI项目中，给包含UIKit按钮（通过UIViewRepresentable嵌入）和SwiftUI按钮的VStack添加了onTapGesture，出现以下问题：

• 点击SwiftUI按钮可正常响应自身点击事件
• 点击UIKit按钮时，触发的却是VStack的Tap手势，而非按钮自身的点击事件

需求：兼容iOS14，保留VStack的Tap手势，让UIKit按钮的点击操作生效。

界面示意图：

问题原因 #

SwiftUI的onTapGesture会默认拦截子视图的触摸事件，但SwiftUI原生Button内部自带高优先级手势，能阻止事件冒泡到父视图的手势。而UIKit控件与SwiftUI手势系统没有原生集成，导致其点击事件被父视图的VStack手势吞噬。

解决方案（兼容iOS14） #

我们可以通过UIKit的手势识别器代理，精确控制触摸区域是否允许SwiftUI手势触发，既保留VStack的全局手势，又让UIKit按钮正常响应点击。

步骤1：修改UIKitButtonView代码

1. 让UIKitButtonView遵循UIGestureRecognizerDelegate协议
2. 在setup方法中开启视图和按钮的交互权限，并设置代理
3. 实现代理方法，判断触摸点是否在按钮范围内，决定是否阻止SwiftUI手势

修改后的UIKitButtonView代码：

class UIKitButtonView: UIView, UIGestureRecognizerDelegate {
    @IBOutlet var contentView: UIView!
    @IBOutlet var uikitButton: UIButton!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setup() {
        Bundle.main.loadNibNamed("UIKitButtonView", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        // 开启交互权限并设置手势代理
        self.isUserInteractionEnabled = true
        contentView.isUserInteractionEnabled = true
        uikitButton.isUserInteractionEnabled = true
        self.gestureRecognizerDelegate = self
    }
    
    @IBAction func buttonAction(_ sender: Any) {
        debugPrint("UIKit button clicked")
    }
    
    // 控制SwiftUI手势是否在当前视图触发
    func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        let touchPoint = gestureRecognizer.location(in: self)
        // 触摸点在按钮范围内时，阻止SwiftUI手势，让按钮自己处理
        return !uikitButton.frame.contains(touchPoint)
    }
}

步骤2：验证效果

此时点击UIKit按钮会触发自身的buttonAction，点击VStack的其他区域（包括Bridge视图的非按钮区域）会触发VStack的onTapGesture，完全符合需求，且兼容iOS14。

补充说明 #

如果不需要Bridge视图的非按钮区域触发VStack手势，也可以简化代理方法直接返回false，这样整个Bridge区域都会阻止SwiftUI手势，只保留按钮的点击事件。

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