如何为菜单栏自定义NSView实现点击时的背景填充效果？

嘿，这个问题我刚好碰到过！当你给菜单栏按钮加了自定义NSView子视图后，确实会覆盖系统默认的点击效果，不过咱们手动实现其实很简单——核心就是通过重写鼠标事件来控制按钮的高亮状态，再在绘制方法里根据状态画出对应的背景就行。

第一步：创建自定义NSView子类，跟踪状态并重写鼠标事件 #

首先咱们需要一个属性来记录按钮是否处于高亮状态，然后重写mouseDown、mouseUp和mouseExited方法来切换这个状态，每次状态变化都触发重绘：

import Cocoa

class MenuBarButtonView: NSView {
    // 标记按钮是否处于高亮状态
    private var isHighlighted = false {
        didSet {
            setNeedsDisplay(bounds) // 状态改变时立即重绘视图
        }
    }
    
    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        setupBasicConfig()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBasicConfig()
    }
    
    private func setupBasicConfig() {
        wantsLayer = true // 启用层支持，让绘制更流畅
        acceptsMouseMovedEvents = true // 确保能接收鼠标移动/移出事件
    }
    
    // 鼠标按下时，设置为高亮状态
    override func mouseDown(with event: NSEvent) {
        super.mouseDown(with: event)
        isHighlighted = true
        // 顺便触发菜单弹出（如果有绑定菜单的话）
        if let menu = menu {
            NSMenu.popUpContextMenu(menu, with: event, for: self)
        }
    }
    
    // 鼠标松开时，取消高亮
    override func mouseUp(with event: NSEvent) {
        super.mouseUp(with: event)
        isHighlighted = false
    }
    
    // 鼠标移出视图范围时，也取消高亮（避免按住按钮移出后一直亮着）
    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        isHighlighted = false
    }
}

第二步：在draw方法中绘制背景 #

接下来就是关键的绘制部分了，咱们在draw(_ rect: NSRect)方法里根据isHighlighted的值绘制不同的背景，模仿系统菜单栏按钮的圆角风格：

extension MenuBarButtonView {
    override func draw(_ rect: NSRect) {
        super.draw(rect)
        
        // 根据状态选择背景色：高亮用半透明系统高亮色，正常用透明
        let backgroundColor: NSColor = isHighlighted
            ? NSColor.controlHighlightColor.withAlphaComponent(0.6)
            : NSColor.clear
        
        // 绘制圆角矩形（和系统按钮风格一致，圆角半径4pt）
        let roundedPath = NSBezierPath(roundedRect: rect, xRadius: 4, yRadius: 4)
        backgroundColor.setFill()
        roundedPath.fill()
        
        // 这里可以继续添加你的自定义内容，比如图标或文字
        // 示例：绘制一个自定义图标
        // if let icon = NSImage(named: "menuIcon") {
        //     icon.draw(in: rect.insetBy(dx: 4, dy: 4)) // 留4pt边距
        // }
    }
}

第三步：把自定义视图添加到菜单栏按钮 #

最后就是把这个自定义视图关联到你的NSStatusItem上，两种方式都可以：

方式一：作为子视图添加到默认按钮

let statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
if let defaultButton = statusItem.button {
    let customView = MenuBarButtonView(frame: defaultButton.bounds)
    customView.menu = statusItem.menu // 绑定菜单
    defaultButton.addSubview(customView)
    customView.autoresizingMask = [.width, .height] // 自动适配按钮大小
}

方式二：直接设置为StatusItem的视图

let statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
let customView = MenuBarButtonView(frame: NSRect(x: 0, y: 0, width: 32, height: 22))
customView.menu = statusItem.menu
statusItem.view = customView

一些额外小提示 #

• 尽量使用系统提供的NSColor常量（比如controlHighlightColor），这样能自动适配浅色/深色模式，和系统风格保持一致。
• 如果需要添加图标或文字，记得在draw方法里调整内容的边距，避免和视图边缘贴得太近。
• 如果你的自定义视图需要响应更多鼠标事件（比如hover效果），可以重写mouseEntered方法来添加悬停高亮。

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