SwiftUI手势穿透问题：模块拦截缩放手势的解决方案问询

我们在开发Flow时，需要用单个Canvas渲染所有内容并调用平台特定API，遇到的一个棘手问题是SwiftUI的手势无法穿透。当前的UI结构是用View渲染每个可拖拽的模块（类似数据流图），整个工作区需要支持捏合缩放，但在模块内部进行捏合操作时，模块视图会直接拦截事件，导致工作区的缩放功能完全失效。

现有代码结构如下：

ZStack(alignment: .topLeading) {
    // 我们需要用WorkspaceView来管理平移和缩放
    // 因为SwiftUI的捏合手势不会提供坐标信息！
    WorkspaceView(pan: $model.pan, zoom: $model.zoom)
    WiresView(model: model, nodeOffsets: nodeOffsets)
        .allowsHitTesting(false)
    ForEach(model.nodes) { node in
        // 问题核心：NodeView会拦截本该传递给WorkspaceView的捏合事件
        NodeView(model: $model,
                 node: $model.nodes[model.nodes.firstIndex(of: node)!],
                 nodeOffsets: $nodeOffsets)
    }
    .offset(model.pan)
    .scaleEffect(model.zoom, anchor: .topLeading)
}

解决方案 #

核心思路是让NodeView只响应拖拽手势，把捏合手势主动透传给底层的WorkspaceView，这里提供两种可行的实现方式：

方法1：自定义手势优先级，手动处理冲突 #

给NodeView的拖拽手势设置更低优先级，同时显式让捏合手势穿透到下层：

struct NodeView: View {
    // 你的现有属性...
    
    var body: some View {
        // 模块的UI内容（示例为圆角矩形）
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.blue)
            .frame(width: 120, height: 80)
            // 给拖拽手势绑定一个空的捏合手势，让两者可以同时响应
            .gesture(
                DragGesture()
                    .onChanged { value in
                        // 这里写模块的拖拽逻辑
                        // 比如更新nodeOffsets
                    }
                    .simultaneously(with: MagnificationGesture().onChanged { _ in })
            )
            // 让底层视图能接收未被当前视图处理的手势
            .highPriorityGesture(MagnificationGesture(), including: .subviews)
    }
}

方法2：利用环境变量动态控制点击测试 #

通过标记工作区是否正在缩放，动态关闭NodeView的事件拦截：

// 先给WorkspaceView添加缩放状态跟踪
struct WorkspaceView: View {
    @Binding var pan: CGPoint
    @Binding var zoom: CGFloat
    @State private var isMagnifying = false
    
    var body: some View {
        Color.clear
            .gesture(
                MagnificationGesture()
                    .onChanged { scale in
                        isMagnifying = true
                        zoom *= scale
                    }
                    .onEnded { _ in
                        isMagnifying = false
                    }
            )
            // 将缩放状态注入环境变量
            .environment(\.isWorkspaceMagnifying, isMagnifying)
    }
}

// 定义对应的环境键
private struct IsWorkspaceMagnifyingKey: EnvironmentKey {
    static let defaultValue = false
}

extension EnvironmentValues {
    var isWorkspaceMagnifying: Bool {
        get { self[IsWorkspaceMagnifyingKey.self] }
        set { self[IsWorkspaceMagnifyingKey.self] = newValue }
    }
}

// 修改NodeView，根据环境变量控制点击测试
struct NodeView: View {
    @Environment(\.isWorkspaceMagnifying) private var isMagnifying
    // 你的现有属性...
    
    var body: some View {
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.blue)
            .frame(width: 120, height: 80)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        // 模块拖拽逻辑
                    }
            )
            // 工作区缩放时，禁止NodeView拦截事件
            .allowsHitTesting(!isMagnifying)
    }
}

额外优化：调整ZStack层级 #

把平移和缩放效果应用到所有内容的容器上，避免手势坐标计算混乱：

ZStack(alignment: .topLeading) {
    WorkspaceView(pan: $model.pan, zoom: $model.zoom)
    // 用ZStack包裹所有内容，统一应用平移和缩放
    ZStack {
        WiresView(model: model, nodeOffsets: nodeOffsets)
            .allowsHitTesting(false)
        ForEach(model.nodes) { node in
            NodeView(model: $model,
                     node: $model.nodes[model.nodes.firstIndex(of: node)!],
                     nodeOffsets: $nodeOffsets)
        }
    }
    .offset(model.pan)
    .scaleEffect(model.zoom, anchor: .topLeading)
}

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