NSVisualEffectView未生效：如何实现NSPanel预期的毛玻璃效果？

问题原因分析 #

• 窗口不透明设置冲突：代码中self.isOpaque = true和self.backgroundColor = .gray强制窗口背景完全不透明，直接覆盖了NSVisualEffectView的毛玻璃效果。
• 视图层级错误：将NSVisualEffectView添加为NSHostingView的子视图后，SwiftUI视图会显示在它上方，遮挡毛玻璃；同时.behindWindow混合模式在不透明窗口下无法生效。
• 圆角未正确配置：仅设置visualEffectView的layer圆角，但未开启图层裁剪，且窗口样式未配合支持圆角显示。

修复方案与代码修正 #

核心修复步骤 #

1. 取消窗口不透明设置，确保背景透明，让毛玻璃能穿透显示底层内容。
2. 调整NSVisualEffectView的层级，将其作为contentView的底层视图，同时修改混合模式为.withinWindow适配窗口内效果。
3. 开启图层裁剪确保圆角生效，同时给窗口添加圆角样式掩码。
4. 确保SwiftUI宿主视图背景透明，避免遮挡毛玻璃。

修正后的完整代码 #

public class MyCustomPanel: NSPanel {

    public init() {
        super.init(contentRect: NSRect(origin: NSPoint(x: 200, y: 200), size: .zero), styleMask: [.fullSizeContentView, .nonactivatingPanel, .roundedCorner], backing: .buffered, defer: false)

        self.isFloatingPanel = true
        self.level = .floating
        self.worksWhenModal = true
        self.hidesOnDeactivate = false
        self.titleVisibility = .hidden
        self.backgroundColor = .clear
        self.isMovableByWindowBackground = true
        self.titlebarAppearsTransparent = true
        self.animationBehavior = .utilityWindow
        self.isOpaque = false // 关键：设置窗口为非透明
        
        // 创建毛玻璃视图
        let visualEffect = NSVisualEffectView()
        visualEffect.translatesAutoresizingMaskIntoConstraints = false
        visualEffect.material = .windowBackground
        visualEffect.blendingMode = .withinWindow // 适配窗口内的混合模式
        visualEffect.state = .active
        visualEffect.wantsLayer = true
        visualEffect.layer?.cornerRadius = 16.0
        visualEffect.layer?.masksToBounds = true // 开启裁剪，确保圆角生效
        
        // 创建SwiftUI宿主视图并设置透明背景
        let hostingView = NSHostingView(rootView: MyCustomSwiftUIView())
        hostingView.translatesAutoresizingMaskIntoConstraints = false
        hostingView.backgroundColor = .clear
        
        // 设置contentView为容器，先添加毛玻璃（底层），再添加SwiftUI视图（上层）
        let contentView = NSView()
        self.contentView = contentView
        contentView.addSubview(visualEffect)
        contentView.addSubview(hostingView)
        
        // 激活约束
        NSLayoutConstraint.activate([
            // 毛玻璃铺满整个contentView
            visualEffect.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            visualEffect.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            visualEffect.topAnchor.constraint(equalTo: contentView.topAnchor),
            visualEffect.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            
            // SwiftUI视图铺满整个contentView
            hostingView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            hostingView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            hostingView.topAnchor.constraint(equalTo: contentView.topAnchor),
            hostingView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
}

额外注意事项 #

• 需确保MyCustomSwiftUIView自身背景为透明，可在SwiftUI视图中添加.background(Color.clear)，避免遮挡毛玻璃效果。
• styleMask中添加.roundedCorner可让系统层面支持窗口圆角，与visualEffectView的layer圆角配合，效果更统一。

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