SwiftUI中如何实现点击重叠视图触发双onTapGesture（穿透点击）

在SwiftUI中，默认顶层视图的onTapGesture会拦截点击事件，导致下层视图的手势无法触发。要实现先触发顶层手势，再触发下层手势，可以通过以下实用方式实现：

方法一：抽离下层点击逻辑，顶层手动调用 #

把下层视图的点击处理抽成独立函数，在顶层手势的onEnded回调里主动调用这个函数，就能严格保证执行顺序。

struct TapOrderView: View {
    // 抽离下层视图的点击逻辑
    private func lowerViewTapAction() {
        print("触发下层视图的点击")
    }
    
    var body: some View {
        ZStack {
            // 下层视图
            Color.blue
                .frame(width: 300, height: 300)
                .onTapGesture {
                    lowerViewTapAction()
                }
            
            // 顶层视图
            Color.red
                .frame(width: 200, height: 200)
                .onTapGesture {
                    print("触发顶层视图的点击")
                    // 顶层逻辑执行完后，调用下层的点击逻辑
                    lowerViewTapAction()
                }
        }
    }
}

方法二：通过状态绑定触发下层动作 #

如果下层视图的点击逻辑需要保留原始手势绑定，也可以用状态变量作为触发信号，顶层手势结束后切换状态来触发下层动作：

struct TapOrderView: View {
    @State private var triggerLowerTap = false
    
    var body: some View {
        ZStack {
            Color.blue
                .frame(width: 300, height: 300)
                .onTapGesture {
                    print("触发下层视图的点击")
                }
                // 监听状态变化，主动触发点击逻辑
                .onChange(of: triggerLowerTap) { newValue in
                    if newValue {
                        print("触发下层视图的点击")
                        triggerLowerTap = false
                    }
                }
            
            Color.red
                .frame(width: 200, height: 200)
                .onTapGesture {
                    print("触发顶层视图的点击")
                    // 发送触发信号给下层
                    triggerLowerTap = true
                }
        }
    }
}

关键注意点 #

• 避免使用simultaneousGesture，它会让两个手势同时触发，无法保证先后顺序。
• 优先选择第一种抽离函数的方式，逻辑更直接清晰，维护成本更低。

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