Qt自定义控件-竖状滑条

网上大多是横向滑条，竖状的自定义滑条比较少，我今天分享一下给大家
一、创建自定义没用条类CustomSlider，基于QSlider，因为初始化时，不能获取滑条value、width和heigth的值，所以重写了showEvent。
1、customslider.h

#ifndef CUSTOMSLIDER_H
#define CUSTOMSLIDER_H

#include <QWidget>
#include <QSlider>
#include <QLabel>
#include <QMouseEvent>

class CustomSlider : public QSlider
{
    Q_OBJECT
public:
    CustomSlider(QWidget* parent = 0);
    ~CustomSlider();
protected:
   virtual void mousePressEvent(QMouseEvent *event);
   virtual void mouseReleaseEvent(QMouseEvent *event);
   virtual void mouseMoveEvent(QMouseEvent *event);
   virtual void mouseDoubleClickEvent(QMouseEvent *event);
   virtual void showEvent(QShowEvent *event);
private:
  QLabel* m_displayLabel;
};

#endif // CUSTOMSLIDER_H

2、customslider.cpp

#include "customslider.h"
#include <QMessageBox>
#include <QDebug>


CustomSlider::CustomSlider(QWidget* parent):QSlider(parent)
{
    m_displayLabel=new QLabel(this);
    //设置游标背景为白色
    m_displayLabel->setAutoFillBackground(true);
    QPalette palette;
    palette.setColor(QPalette::Background, Qt::blue);
    palette.setColor(QPalette::WindowText, Qt::white);
    m_displayLabel->setPalette(palette);
    m_displayLabel->setAlignment(Qt::AlignCenter);
    m_displayLabel->setVisible(true);
}

CustomSlider::~CustomSlider()
{

}


void CustomSlider::mousePressEvent(QMouseEvent *event)
{
    m_displayLabel->setText(QString::number(this->value()));
    m_displayLabel->move(this->width()/2-20,this->height()-40-(this->value()*(this->height()/(this->maximum()-this->minimum()))));
    QSlider::mousePressEvent(event);
}

void CustomSlider::mouseReleaseEvent(QMouseEvent *event)
{
    m_displayLabel->setText(QString::number(this->value()));
    m_displayLabel->move(this->width()/2-20,this->height()-40-(this->value()*(this->height()/(this->maximum()-this->minimum()))));
    QSlider::mouseReleaseEvent(event);
}

void CustomSlider::mouseMoveEvent(QMouseEvent *event)
{
    m_displayLabel->setText(QString::number(this->value()));
    m_displayLabel->move(this->width()/2-20,this->height()-40-(this->value()*(this->height()/(this->maximum()-this->minimum()))));
    QSlider::mouseMoveEvent(event);

}

void CustomSlider::mouseDoubleClickEvent(QMouseEvent *event)
{
    m_displayLabel->setText(QString::number(this->value()));
    QSlider::mouseDoubleClickEvent(event);
}

void CustomSlider::showEvent(QShowEvent *event)
{
    m_displayLabel->setFixedSize(QSize(this->width(),this->width()));
    m_displayLabel->setText(QString::number(this->value()));
    m_displayLabel->move(this->width()/2-20,this->height()-40-(this->value()*(this->height()/(this->maximum()-this->minimum()))));
    QSlider ::showEvent(event);
}

二、把原生控件提升为自定义控件，如下图

三、滑条的stylesheet:

/*horizontal ：水平QSlider*/
QSlider::groove:vertical {
    border: 0px solid #bbb;
}

/*1.滑动过的槽设计参数*/
QSlider::sub-page:vertical {
     /*槽颜色*/
    background: #484848;
     /*外环区域倒圆角度*/
    border-radius: 2px;
     /*上遮住区域高度*/
    margin-top:8px;
     /*下遮住区域高度*/
    margin-bottom:8px;
}

/*2.未滑动过的槽设计参数*/
QSlider::add-page:vertical {
    /*槽颜色*/
    background: #4984C7;
   
    border: 1px solid #777;
    /*外环区域倒圆角度*/
    border-radius: 2px;
     /*上遮住区域高度*/
    margin-top:8px;
     /*下遮住区域高度*/
    margin-bottom:8px;
}

/*3.平时滑动的滑块设计参数*/
QSlider::handle:vertical {
    /*滑块颜色*/
    background: #4984C7;
    /*滑块的宽度*/
    height:30px;
     /*滑块外环倒圆角度
    border-radius: 15px;*/
     /*上遮住区域高度*/
    margin-top:2px;
     /*下遮住区域高度*/
    margin-bottom:2px;
}

/*4.手动拉动时显示的滑块设计参数*/
QSlider::handle:vertical:hover {
    /*滑块颜色*/
    background: #484848;
    /*滑块的宽度*/
    height: 30px;
    
    border: 1px solid #484848;
     /*滑块外环倒圆角度
    border-radius: 15px;*/
     /*上遮住区域高度*/
    margin-top:2px;
     /*下遮住区域高度*/
    margin-bottom:2px;
}

四、编译后的效果

wx_camera_1691983290794