如何自定义NSButton实现类似Xcode提交按钮的蓝色背景等效果

现有实现的核心问题 #

• 仅在awakeFromNib中单次设置背景，未监听按钮的isHighlighted状态变更，无法实现点击时的背景色切换效果
• 未设置按钮的contentInsets，关闭边框后默认内容边距丢失，导致文字位置偏移
• 未配置layer的阴影、边框属性，缺少原生按钮的质感
• 文本属性仅初始化设置一次，后续修改title时样式会失效，也没有适配状态变化的文本样式

修正后的完整子类实现 #

class CommitStyleButton: NSButton {
    // 正常状态背景色
    var normalBackgroundColor: NSColor = .systemBlue
    // 高亮状态背景色
    var highlightedBackgroundColor: NSColor = .systemBlue.withAlphaComponent(0.8)
    
    override var isHighlighted: Bool {
        didSet {
            // 状态变化时更新背景色
            layer?.backgroundColor = isHighlighted ? highlightedBackgroundColor.cgColor : normalBackgroundColor.cgColor
        }
    }
    
    override var title: String {
        didSet {
            // 标题变化时自动更新富文本样式
            updateAttributedTitle()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        wantsLayer = true
        isBordered = false
        layer?.cornerRadius = 6
        // 加轻微边框增强质感
        layer?.borderWidth = 1
        layer?.borderColor = NSColor.systemBlue.withAlphaComponent(0.1).cgColor
        // 配置阴影
        layer?.shadowColor = NSColor.black.withAlphaComponent(0.1).cgColor
        layer?.shadowOpacity = 1
        layer?.shadowRadius = 2
        layer?.shadowOffset = .init(width: 0, height: 1)
        // 设置内容边距，避免文字贴边
        contentInsets = .init(top: 6, left: 16, bottom: 6, right: 16)
        // 初始设置背景和文本
        layer?.backgroundColor = normalBackgroundColor.cgColor
        updateAttributedTitle()
    }
    
    private func updateAttributedTitle() {
        let font = NSFont.systemFont(ofSize: 14, weight: .medium)
        let fontColor = NSColor.white
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center
        attributedTitle = NSAttributedString(
            string: title,
            attributes: [
                .foregroundColor: fontColor,
                .font: font,
                .paragraphStyle: paragraphStyle
            ]
        )
    }
}

额外优化说明 #

• 如果需要适配深色模式，可以给normalBackgroundColor和highlightedBackgroundColor设置动态颜色，自动跟随系统外观切换
• 阴影参数可以根据实际视觉需求调整，和Xcode原生效果对齐
• 如果需要支持其他状态（比如禁用状态），可以新增对应的背景色属性，在状态变更的回调里同步更新即可

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