SwiftUI 缩放背景拦截点击

Question

我在 macOS (12.x) 上遇到 SwiftUI 问题，缩放背景会干扰鼠标点击。以下是一个最小的示例:

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Test") {
                print("Tested")
            }
            
            Image(systemName: "waveform.circle")
                .resizable()
                .frame(width: 200, height: 200)
                .background(
                    Image(systemName: "waveform.circle")
                        .resizable()
                        .foregroundColor(.red)
                        .scaleEffect(2.0)
                        .blur(radius: 20)
                        .clipped()
                )
        }
        .frame(width: 500, height: 500)
    }
}

请注意，按“测试”按钮实际上不起作用 - 不会向控制台打印任何消息。

我找到了使用 NSHostingView 的解决方法，但它非常丑陋 - 我很想知道是否有一个纯 SwiftUI 解决方案来“剪辑”背景 View ，这样不仅它的外观被切断，但它也能够拦截点击。

这是一个解决方法(请注意，关闭缩放效果也可以解决该问题)。

struct ContentViewWorkAround: View {
    
    @State private var scaleEffectOn = true
    @State private var workAround = false
    
    @ViewBuilder private var imageBackground: some View {
        switch workAround {
        case false:
            Image(systemName: "waveform.circle")
                .resizable()
                .foregroundColor(.red)
                .scaleEffect(scaleEffectOn ? 2.0 : 1.0)
                .blur(radius: 20)
                .clipped()
                .frame(width: 200, height: 200) // ineffective at preventing clicks
        case true:
            NSHostingViewRepresented {
                Image(systemName: "waveform.circle")
                    .resizable()
                    .foregroundColor(.green)
                    .scaleEffect(2.0)
                    .blur(radius: 20)
                    .clipped()
                    .frame(width: 200, height: 200)
            }
        }
        
    }
    
    var body: some View {
        VStack {
            Button("Test") {
                print("Tested")
            }
            
            Image(systemName: "waveform.circle")
                .resizable()
                .frame(width: 200, height: 200)
                .background(
                    imageBackground
                )
            
            Toggle("Scale effect", isOn: $scaleEffectOn)
            Toggle("Workaround", isOn: $workAround)
        }
        .frame(width: 500, height: 500)
    }
}

struct NSHostingViewRepresented<V>: NSViewRepresentable where V: View {
    var content: () -> V
    
    func makeNSView(context: Context) -> NSHostingView<V> {
        NSHostingView(rootView: content())
    }
    
    func updateNSView(_ nsView: NSHostingView<V>, context: Context) { }
}

Answer 1

你尝试过吗？

.allowsHitTesting(false)

停用点击并允许您想要的任何外观。

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Test") {
                print("Tested")
            }
            
            Image(systemName: "waveform.circle")
                .resizable()
                .frame(width: 200, height: 200)
                .background(
                    Image(systemName: "waveform.circle")
                        .resizable()
                        .foregroundColor(.red)
                        .scaleEffect(2.0)
                        .blur(radius: 20)
                        .clipped()
                        .allowsHitTesting(false)
                )
        }
        .frame(width: 500, height: 500)
    }
}