macOS 12.x SwiftUI缩放背景拦截点击问题及纯SwiftUI方案咨询

核心问题在于：缩放后的背景视图即便被视觉裁剪，其完整的缩放范围仍会响应鼠标点击，导致上层按钮无法接收事件。以下是两种纯SwiftUI的解决思路，兼顾裁剪显示和点击透传：

方案一：针对矩形裁剪的极简处理 #

通过clipped()裁剪视觉范围，再用contentShape()限制点击响应区域，最后禁用背景的点击测试：

struct ContentView: View {
    var body: some View {
        ZStack {
            // 缩放的背景视图
            Color.blue
                .scaleEffect(2.0)
                .clipped() // 裁剪超出父视图的部分
                .contentShape(Rectangle()) // 把点击响应范围限定为父视图矩形
                .allowsHitTesting(false) // 完全禁用背景的点击接收
            
            Button("Test") {
                print("Button clicked!")
            }
            .foregroundColor(.white)
            .padding()
            .background(Color.red)
        }
        .frame(width: 200, height: 200)
    }
}

方案二：适配自定义裁剪形状 #

如果背景需要非矩形的裁剪，用clipShape()定义视觉裁剪，再配合containerShape()同步点击响应范围：

// 自定义裁剪形状
struct CustomClipShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path(roundedRect: rect, cornerRadius: 20)
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
                .scaleEffect(1.5)
                .clipShape(CustomClipShape()) // 应用自定义裁剪
                .containerShape(CustomClipShape()) // 点击范围匹配裁剪形状
                .allowsHitTesting(false) // 禁用背景点击
            
            Button("Test") {
                print("Button clicked!")
            }
            .foregroundColor(.white)
            .padding()
            .background(Color.red)
        }
        .frame(width: 200, height: 200)
    }
}

这两种方案都不需要依赖NSHostingView，纯SwiftUI即可实现需求：既保证背景按预期裁剪显示，又不会拦截上层按钮的鼠标点击事件。

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