如何实现类似Finder窗口样式的NSButton控件？

方案一：自定义NSButton子类（最灵活） #

通过自定义按钮类实现完全匹配的样式，同时支持下拉菜单，解决悬停背景区域问题：

1. 自定义按钮类代码

import Cocoa

class FinderStyleButton: NSButton {
    private var isHovered = false
    // 匹配Finder的圆角和内边距参数
    private let cornerRadius: CGFloat = 4.0
    private let backgroundInsets = NSEdgeInsets(top: 4, left: 6, bottom: 4, right: 6)

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        setupBaseConfig()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseConfig()
    }
    
    private func setupBaseConfig() {
        buttonType = .momentaryPushIn
        bezelStyle = .borderless
        // 显示下拉菜单箭头
        showsMenuIndicator = true
        // 图片位置（可根据需求改为.imageOnly）
        imagePosition = .imageLeft
        // 内边距控制背景区域大小
        contentEdgeInsets = backgroundInsets
        // 初始化鼠标跟踪区域
        updateTrackingAreas()
    }
    
    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        // 移除旧跟踪区域避免重复监听
        trackingAreas.forEach { removeTrackingArea($0) }
        let trackingArea = NSTrackingArea(rect: bounds, 
                                          options: [.mouseEnteredAndExited, .activeAlways], 
                                          owner: self, 
                                          userInfo: nil)
        addTrackingArea(trackingArea)
    }
    
    // 更新鼠标悬停状态
    override func mouseEntered(with event: NSEvent) {
        super.mouseEntered(with: event)
        isHovered = true
        needsDisplay = true
    }
    
    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        isHovered = false
        needsDisplay = true
    }
    
    // 自定义绘制背景
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        
        let backgroundRect = bounds.inset(by: backgroundInsets)
        let roundedPath = NSBezierPath(roundedRect: backgroundRect, 
                                       xRadius: cornerRadius, 
                                       yRadius: cornerRadius)
        
        // 根据按钮状态设置背景色
        switch (isHighlighted, isHovered) {
        case (true, _):
            NSColor.controlAccentColor.withAlphaComponent(0.2).setFill()
        case (false, true):
            NSColor.controlAccentColor.withAlphaComponent(0.1).setFill()
        default:
            return // 正常状态不绘制背景
        }
        roundedPath.fill()
    }
}

2. 使用示例

// 创建下拉菜单
let menu = NSMenu()
menu.addItem(withTitle: "按名称排列", action: #selector(menuActionHandler), keyEquivalent: "")
menu.addItem(withTitle: "按日期排列", action: #selector(menuActionHandler), keyEquivalent: "")
menu.addItem(withTitle: "按大小排列", action: #selector(menuActionHandler), keyEquivalent: "")

// 创建并配置按钮
let finderButton = FinderStyleButton(frame: NSRect(x: 30, y: 30, width: 90, height: 32))
finderButton.image = NSImage(systemSymbolName: "arrow.up.arrow.down", accessibilityDescription: "排列选项")
finderButton.menu = menu
view.addSubview(finderButton)

// 菜单点击事件处理
@objc private func menuActionHandler(_ sender: NSMenuItem) {
    print("选中菜单：\(sender.title)")
}

方案二：改造NSPopUpButton（快速适配） #

如果不需要完全复刻，也可以用NSPopUpButton调整样式快速接近Finder效果：

let popUpBtn = NSPopUpButton(frame: NSRect(x: 30, y: 30, width: 90, height: 32), pullsDown: true)
popUpBtn.bezelStyle = .recessed
popUpBtn.contentEdgeInsets = NSEdgeInsets(top: 4, left: 6, bottom: 4, right: 6)
// 添加菜单选项...
view.addSubview(popUpBtn)

这种方式样式接近但细节上可能无法完全匹配，适合快速开发需求。

关键问题解决点 #

1. 下拉菜单添加：通过设置按钮的menu属性并开启showsMenuIndicator，即可实现带箭头的菜单触发，点击按钮任意区域都会弹出菜单。
2. 悬停背景区域：通过自定义trackingArea覆盖整个按钮frame，结合draw方法绘制背景，让悬停/点击区域为按钮完整尺寸，而非仅图片大小。

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