重叠使用两个UIViewRepresentable时UITapGestureRecognizer未触发问题

核心问题分析 #

1. 初始点击全被红色视图捕获的原因 #

SwiftUI的clipShape(Circle())仅修改视觉渲染效果，不会改变底层UIKit视图的实际点击区域。你的UIKitView包装的是全屏UIView，即使视觉上被裁剪成圆形，这个UIView的点击范围仍然是全屏的，所以任何点击都会被顶部红色视图的UITapGestureRecognizer拦截，底部黄色视图根本接收不到事件。

而你添加的.contentShape(Circle())是SwiftUI原生视图的点击区域配置，对UIViewRepresentable包装的UIKit视图完全不生效——这个修饰符只作用于SwiftUI的视图层级，无法渗透到UIKit侧的手势识别逻辑中。

2. 重写hitTest后外部无响应的原因 #

当你重写红色视图的hitTest，让它只响应圆形区域时，点击圆形外区域时红色视图会返回nil表示不处理该事件。但此时在SwiftUI的布局系统中，红色UIKitView仍然占据全屏空间，SwiftUI会判定这个点击位置属于红色视图的布局范围，不会将事件向下传递给底部的黄色视图。

解决方案 #

方案一：在UIKit侧限制点击区域 #

自定义UIView子类，重写point(inside:with:)方法，让它只在指定形状内响应点击，同时确保SwiftUI层面允许事件穿透。

步骤1：自定义带点击区域限制的UIView

class ShapeRestrictedView: UIView {
    // 存储需要限制的点击路径
    var hitTestPath: UIBezierPath?
    
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        guard let path = hitTestPath else {
            // 没有指定路径时，使用默认逻辑
            return super.point(inside: point, with: event)
        }
        // 仅当点击点在路径内时，才响应事件
        return path.contains(point)
    }
}

步骤2：修改UIKitView使用自定义视图

struct UIKitView: UIViewRepresentable {
    let color: UIColor
    // 新增参数，传递点击限制路径（nil表示不限制）
    let hitTestPath: UIBezierPath?
    
    func makeUIView(context: Context) -> ShapeRestrictedView {
        let view = ShapeRestrictedView()
        view.backgroundColor = color
        let tapGesture = UITapGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handleTap(gesture:)))
        view.addGestureRecognizer(tapGesture)
        view.hitTestPath = hitTestPath
        return view
    }

    func updateUIView(_ uiView: ShapeRestrictedView, context: Context) {
        uiView.hitTestPath = hitTestPath
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(color: color)
    }

    class Coordinator: NSObject {
        let color: UIColor

        init(color: UIColor) {
            self.color = color
        }

        @objc func handleTap(gesture: UITapGestureRecognizer) {
            print("Tapped in \(color == .yellow ? \"yellow\" : \"red\")")
        }
    }
}

步骤3：使用时传递圆形路径

ZStack {
    UIKitView(color: .yellow, hitTestPath: nil)
    UIKitView(
        color: .red,
        hitTestPath: UIBezierPath(ovalIn: UIScreen.main.bounds)
    )
    .clipShape(Circle())
}

这样红色视图只有圆形区域会响应点击，外部点击会穿透到底部黄色视图。

方案二：改用SwiftUI原生手势（更简洁） #

如果不需要区分手指/铅笔点击的逻辑（或者可以用SwiftUI的GestureAPI实现），直接用SwiftUI原生的onTapGesture配合contentShape即可，这样clipShape和contentShape能正确联动：

struct ColoredTapView: View {
    let color: UIColor
    let onTap: () -> Void
    
    var body: some View {
        Color(color)
            .onTapGesture(perform: onTap)
    }
}

// 使用示例
ZStack {
    ColoredTapView(color: .yellow) {
        print("Tapped in yellow")
    }
    ColoredTapView(color: .red) {
        print("Tapped in red")
    }
    .clipShape(Circle())
    .contentShape(Circle())
}

这个方案完全基于SwiftUI生态，不需要混合UIKit，点击区域会严格遵循contentShape的设置。

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