如何重现macOS状态栏控制中心项的背景模糊效果？

我想重现macOS状态栏控制中心（Wi-Fi、声音、电池等选项）的背景模糊/色彩效果。通常这类效果会用NSVisualEffectView实现：

let view = NSVisualEffectView()
view.blendingMode = .behindWindow
view.state = .active
view.material = .popover

但所有material选项都没法完全匹配苹果控制中心的效果。实际上状态栏左侧的应用菜单背景才是.popover材质的效果，说明控制中心用了不同的实现方式。

几乎所有开源状态栏应用都用.popover来模拟，但和原生效果始终有细微差异。用SwiftUI的MenuBarExtra（带menuBarExtraStyle(.window)）或者SwiftUI材质背景也达不到完全一致的效果。

我提供了一张截图，左侧是我用NSPanel模拟的效果，和原生控制中心外观相似，但色彩有细微差别。

我试过用低透明度白色叠加层、所有可用材质、SwiftUI叠加层的混合模式，都没成功。请问怎么实现和macOS控制中心完全一致的背景效果？

我的测试代码：

class DemoPanel: NSPanel {
    lazy var visualEffectView: NSVisualEffectView = {
        let view = NSVisualEffectView()
        view.blendingMode = .behindWindow
        view.state = .active
        view.material = .popover
        
        return view
    }()
    
    init() {
        super.init(
            contentRect: CGRect(x: 0, y: 0, width: 300, height: 100),
            styleMask: [.borderless, .fullSizeContentView, .nonactivatingPanel, .utilityWindow],
            backing: .buffered,
            defer: false
        )
        
        collectionBehavior = [.canJoinAllApplications]
        
        isMovable = false
        isMovableByWindowBackground = false
        isFloatingPanel = true
        level = .statusBar
        isOpaque = false
        titleVisibility = .hidden
        titlebarAppearsTransparent = true
        titlebarSeparatorStyle = .none
        
        isReleasedWhenClosed = false
        hidesOnDeactivate = false
        
        standardWindowButton(.closeButton)?.isHidden = true
        standardWindowButton(.miniaturizeButton)?.isHidden = true
        standardWindowButton(.zoomButton)?.isHidden = true
        
        contentView = visualEffectView
    }
}

解决方案：使用.sidebar材质配合窗口样式调整 #

苹果控制中心的背景效果实际是用.sidebar材质实现的，配合正确的窗口配置就能达到一致效果，调整代码如下：

1. 将NSVisualEffectView的material改为.sidebar
2. 把窗口level设置为.popUpMenu（控制中心实际使用的层级）
3. 移除.utilityWindow样式，控制中心不属于工具窗口类型

修改后的代码：

class DemoPanel: NSPanel {
    lazy var visualEffectView: NSVisualEffectView = {
        let view = NSVisualEffectView()
        view.blendingMode = .behindWindow
        view.state = .active
        view.material = .sidebar // 替换为sidebar材质
        
        return view
    }()
    
    init() {
        super.init(
            contentRect: CGRect(x: 0, y: 0, width: 300, height: 100),
            styleMask: [.borderless, .fullSizeContentView, .nonactivatingPanel], // 移除.utilityWindow
            backing: .buffered,
            defer: false
        )
        
        collectionBehavior = [.canJoinAllApplications]
        
        isMovable = false
        isMovableByWindowBackground = false
        isFloatingPanel = true
        level = .popUpMenu // 改为popUpMenu层级
        isOpaque = false
        titleVisibility = .hidden
        titlebarAppearsTransparent = true
        titlebarSeparatorStyle = .none
        
        isReleasedWhenClosed = false
        hidesOnDeactivate = false
        
        standardWindowButton(.closeButton)?.isHidden = true
        standardWindowButton(.miniaturizeButton)?.isHidden = true
        standardWindowButton(.zoomButton)?.isHidden = true
        
        contentView = visualEffectView
    }
}

补充说明 #

• .sidebar材质在macOS Ventura及以后版本中，会呈现出和控制中心一致的淡色模糊效果，色彩表现比.popover更贴近原生
• .popUpMenu层级确保窗口和控制中心处于同一显示层级，避免因层级差异导致的视觉偏差
• 若需适配更早的macOS版本，可额外添加对.vibrantDark或.vibrantLight材质的版本判断，但.sidebar是原生控制中心的标准材质

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