Swift中为macOS的NSSlider设置滑块缩略图的实现咨询

方法1：自定义NSView实现滑块 #

完全自定义滑块控件，继承NSView自行处理绘制与交互：

• 重写draw(_:)方法，依次绘制滑块轨道、填充进度，最后在对应位置绘制自定义缩略图
• 实现mouseDown(with:)、mouseDragged(with:)等鼠标事件方法，计算拖动位置并更新滑块值，触发视图重绘
• 封装value、minimumValue、maximumValue等属性，保持和原生NSSlider一致的使用逻辑

示例代码片段：

class CustomSlider: NSView {
    var value: Double = 0.5 {
        didSet { needsDisplay = true }
    }
    var minimumValue: Double = 0.0
    var maximumValue: Double = 1.0
    var thumbImage: NSImage!
    
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        // 绘制轨道
        let trackRect = NSRect(x: 0, y: bounds.midY - 2, width: bounds.width, height: 4)
        NSColor.lightGray.setFill()
        trackRect.fill()
        // 绘制填充进度
        let filledWidth = (value - minimumValue) / (maximumValue - minimumValue) * bounds.width
        let filledRect = NSRect(x: 0, y: bounds.midY - 2, width: filledWidth, height: 4)
        NSColor.systemBlue.setFill()
        filledRect.fill()
        // 绘制自定义缩略图
        guard let thumbImage = thumbImage else { return }
        let thumbSize = NSSize(width: 24, height: 24)
        let thumbX = filledWidth - thumbSize.width / 2
        let thumbRect = NSRect(origin: NSPoint(x: thumbX, y: bounds.midY - thumbSize.height / 2), size: thumbSize)
        thumbImage.draw(in: thumbRect)
    }
    
    override func mouseDown(with event: NSEvent) {
        updateValue(from: event.locationInWindow)
    }
    
    override func mouseDragged(with event: NSEvent) {
        updateValue(from: event.locationInWindow)
    }
    
    private func updateValue(from windowPoint: NSPoint) {
        let localPoint = convert(windowPoint, from: nil)
        let normalizedX = max(0, min(localPoint.x, bounds.width)) / bounds.width
        value = minimumValue + normalizedX * (maximumValue - minimumValue)
    }
}

方法2：自定义NSSliderCell #

继承NSSliderCell，重写缩略图绘制方法替换原生样式：

• 创建自定义SliderCell类，重写drawThumb(withFrame:in:)方法，在其中绘制自定义图片
• 将原生NSSlider的cell替换为自定义cell即可

示例代码片段：

class CustomSliderCell: NSSliderCell {
    var thumbImage: NSImage!
    
    override func drawThumb(withFrame frame: NSRect, in controlView: NSView) {
        guard let thumbImage = thumbImage else {
            super.drawThumb(withFrame: frame, in: controlView)
            return
        }
        // 调整图片绘制位置，保证居中显示
        let imageFrame = NSRect(x: frame.origin.x + (frame.width - thumbImage.size.width)/2,
                                y: frame.origin.y + (frame.height - thumbImage.size.height)/2,
                                width: thumbImage.size.width,
                                height: thumbImage.size.height)
        thumbImage.draw(in: imageFrame)
    }
}

// 使用方式
let slider = NSSlider(frame: NSRect(x: 20, y: 20, width: 200, height: 30))
let customCell = CustomSliderCell()
customCell.thumbImage = NSImage(named: "your-custom-thumb-image")
slider.cell = customCell

方法3：使用第三方控件 #

直接选用成熟的macOS自定义滑块库，这类库通常已内置自定义缩略图功能：

• SliderKit：专注macOS滑块的控件库，支持高度样式定制
• CarbonKit：包含多种自定义UI组件，其中滑块控件支持自定义缩略图

当前滑块效果：

期望实现的效果：

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