Qt自定義帶游標的slider，在滑塊正上方顯示當前值（類似於進度條，用一個額外的QLabel冒充QSilder的一部分，然后move就行了）

首先自定義QSlider的子類MyCustomSlider，如下所示。

mycustomslider.h

 

#ifndef MYCUSTOMSLIDER_H
#define MYCUSTOMSLIDER_H
#include <QSlider>
#include <QLabel>
#include <QMouseEvent>
class MyCustomSlider : public QSlider
{
public:
    MyCustomSlider(QWidget *parent=0);
    ~MyCustomSlider();

protected:
    virtual void mousePressEvent(QMouseEvent *event);
    virtual void mouseReleaseEvent(QMouseEvent *event);
    virtual void mouseMoveEvent(QMouseEvent *event);

private:
    QLabel* m_displayLabel;
};

#endif // MYCUSTOMSLIDER_H

mycustomslider.cpp

 

 

#include "mycustomslider.h"
#include <QPalette>

MyCustomSlider::MyCustomSlider(QWidget *parent):QSlider(parent)
{
   m_displayLabel=new QLabel(this);
   m_displayLabel->setFixedSize(QSize(20,20));
   //設置游標背景為白色
   m_displayLabel->setAutoFillBackground(true);
   QPalette palette;
   palette.setColor(QPalette::Background, Qt::white);
   m_displayLabel->setPalette(palette);

   m_displayLabel->setAlignment(Qt::AlignCenter);

   m_displayLabel->setVisible(false);
   m_displayLabel->move(0,3);
}

MyCustomSlider::~MyCustomSlider()
{

}

void MyCustomSlider::mousePressEvent(QMouseEvent *event)
{
    if(!m_displayLabel->isVisible())
    {
        m_displayLabel->setVisible(true);
        m_displayLabel->setText(QString::number(this->value()));
    }
    QSlider::mousePressEvent(event);
}

void MyCustomSlider::mouseReleaseEvent(QMouseEvent *event)
{
    if(m_displayLabel->isVisible())
    {
        m_displayLabel->setVisible(false);
    }
    QSlider::mouseReleaseEvent(event);
}

void MyCustomSlider::mouseMoveEvent(QMouseEvent *event)
{
    m_displayLabel->setText(QString::number(this->value()));
    m_displayLabel->move((this->width()-m_displayLabel->width())*this->value()/(this->maximum()-this->minimum()),3);
    QSlider::mouseMoveEvent(event);
}

然后將界面QSlider控件提升為MyCustomSlider，提升方法如下所示。

 

Qt中控件類的提升

最后的效果如下圖所示，當鼠標點擊滑塊或者拖動滑塊時，滑塊正上方的游標實時顯示當前值，松開鼠標時，游標隱藏。

源碼鏈接：見http://blog.csdn.net/caoshangpa/article/details/51973902的評論

http://blog.csdn.net/caoshangpa/article/details/51973902