网上大多是横向滑条,竖状的自定义滑条比较少,我今天分享一下给大家
一、创建自定义没用条类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