一、效果图
这种滑动条是控件所拼接而成
二、原理
(1)LectureCorrectBoxSliderForm:方形框显示、刻度点以及刻度值。
(2)LectureCorrectSliderForm:继承QSlider
注:不能放在一个类中,否则方形框无法显示到最左边刻度点的正上方。
三、示例代码
LectureCorrectBoxSliderForm.h
#ifndef LECTURECORRECTBOXSLIDERFORM_H
#define LECTURECORRECTBOXSLIDERFORM_H
#include <QWidget>
#include <QLabel>
#include <QDebug>
#define DEF_MIN_RANGE 80
#define DEF_MAX_RANGE 100
namespace Ui {
class LectureCorrectBoxSliderForm;
}
class LectureCorrectBoxSliderForm : public QWidget
{
Q_OBJECT
public:
explicit LectureCorrectBoxSliderForm(QWidget *parent = 0);
~LectureCorrectBoxSliderForm();
void initBox();
// 设置刻度值
void setScoreValue(int value);
// 设置刻度点
void setScale(int x, int y);
// 设置刻度间隔值
void setScaleIntervalValue(int x, int y, const QString &z);
// 显示刻度间隔值
void showScaleIntervalValue();
private slots:
void onSetText(int value);
signals:
void valueChanged(int value);
private:
Ui::LectureCorrectBoxSliderForm *ui;
QLabel *m_boxVlaue;
};
#endif // LECTURECORRECTBOXSLIDERFORM_H
LectureCorrectBoxSliderForm.cpp
#include "LectureCorrectBoxSliderForm.h"
#include "ui_LectureCorrectBoxSliderForm.h"
LectureCorrectBoxSliderForm::LectureCorrectBoxSliderForm(QWidget *parent) :
QWidget(parent),
ui(new Ui::LectureCorrectBoxSliderForm)
{
ui->setupUi(this);
initBox();
// 内部滑动条(QSlider)被滑动,将值告诉外边的LectureCorrectBoxSliderForm类
connect(ui->widget, &LectureCorrectSliderForm::valueChanged,\
this, &LectureCorrectBoxSliderForm::onSetText);
// 自行调整,设置刻度点的位置
int average = this->width() / 4 - 24;
qDebug()<<average;
setScale(10, m_boxVlaue->height() + ui->widget->height() / 2 - 3);
setScale(10 + average * 1 + 1, m_boxVlaue->height() + ui->widget->height() / 2 - 3);
setScale(10 + average * 2 + 2, m_boxVlaue->height() + ui->widget->height() / 2 - 3);
setScale(10 + average * 3 + 2, m_boxVlaue->height() + ui->widget->height() / 2 - 3);
setScale(10 + average * 4 + 3, m_boxVlaue->height() + ui->widget->height() / 2 - 3);
// 显示最下方的刻度数值
showScaleIntervalValue();
}
LectureCorrectBoxSliderForm::~LectureCorrectBoxSliderForm()
{
delete ui;
}
void LectureCorrectBoxSliderForm::initBox()
{
m_boxVlaue = new QLabel(this);
m_boxVlaue->setFixedSize(QSize(25,25));
m_boxVlaue->setStyleSheet("background-color: white;"
"color: black;"
"border: 1px solid gray;");
m_boxVlaue->setAlignment(Qt::AlignCenter);
m_boxVlaue->setVisible(true);
m_boxVlaue->move(1, 1);
}
void LectureCorrectBoxSliderForm::setScoreValue(int value)
{
if (value < DEF_MIN_RANGE || value > DEF_MAX_RANGE) {
onSetText(DEF_MIN_RANGE);
ui->widget->setValue(DEF_MIN_RANGE);
return;
}
onSetText(value);
ui->widget->setValue(value);
}
void LectureCorrectBoxSliderForm::setScale(int x, int y)
{
// QLabel充当圆点(刻度点)
QLabel *point = new QLabel(this);
point->setFixedSize(6, 6);
// 穿透属性:如果滑动条与刻度点重合,当你点击滑动条的时候,防止按压到刻度点,所以给刻度点设置穿透属性,你只能点击到滑动条。
point->setAttribute(Qt::WA_TransparentForMouseEvents, true);
point->setStyleSheet("background-color: rgb(91, 154, 212);"
"border-radius: 3px;");
point->move(x, y);
}
void LectureCorrectBoxSliderForm::setScaleIntervalValue(int x, int y, const QString &z)
{
// QLabel中填入刻度值
QLabel *point = new QLabel(this);
point->setFixedSize(QSize(25,25));
point->setStyleSheet("background-color: white;"
"color: black;");
point->setAlignment(Qt::AlignCenter);
point->setText(z);
point->setVisible(true);
point->move(x, y);
}
void LectureCorrectBoxSliderForm::showScaleIntervalValue()
{
// 设置刻度值,80, 85,90,95, 100
int average = this->width() / 4;
setScaleIntervalValue(5, 65, "80");
setScaleIntervalValue(1 + average * 1 - 3, 65, "85");
setScaleIntervalValue(1 + average * 2 - 10, 65, "90");
setScaleIntervalValue(1 + average * 3 - 16, 65, "95");
setScaleIntervalValue(1 + average * 4 - 24, 65, "100");
}
void LectureCorrectBoxSliderForm::onSetText(int value)
{
m_boxVlaue->move((this->width() - m_boxVlaue->width()) * (value - DEF_MIN_RANGE) / (DEF_MAX_RANGE - DEF_MIN_RANGE), 1);
m_boxVlaue->setText(QString::number(value));
emit valueChanged(value);
}
LectureCorrectSliderForm.h
#ifndef LECTURECORRECTSLIDERFORM_H
#define LECTURECORRECTSLIDERFORM_H
#include <QWidget>
#include <QSlider>
#include <QMouseEvent>
#define DEF_MIN_RANGE 80
#define DEF_MAX_RANGE 100
namespace Ui {
class LectureCorrectSliderForm;
}
class LectureCorrectSliderForm : public QSlider
{
Q_OBJECT
public:
explicit LectureCorrectSliderForm(QWidget *parent = 0);
~LectureCorrectSliderForm();
void setupView();
void setScoreValue(int value);
protected:
virtual void mousePressEvent(QMouseEvent *event);
virtual void mouseReleaseEvent(QMouseEvent *event);
virtual void mouseMoveEvent(QMouseEvent *event);
signals:
void valueChanged(int value);
private:
Ui::LectureCorrectSliderForm *ui;
};
#endif // LECTURECORRECTSLIDERFORM_H
LectureCorrectSliderForm.cpp
#include "LectureCorrectSliderForm.h"
#include "ui_LectureCorrectSliderForm.h"
LectureCorrectSliderForm::LectureCorrectSliderForm(QWidget *parent) :
QSlider(parent),
ui(new Ui::LectureCorrectSliderForm)
{
ui->setupUi(this);
setupView();
}
LectureCorrectSliderForm::~LectureCorrectSliderForm()
{
delete ui;
}
void LectureCorrectSliderForm::setupView()
{
// 设置水平还是垂直滑动条,默认为垂直
this->setOrientation(Qt::Horizontal);
// 设置范围
this->setRange(DEF_MIN_RANGE, DEF_MAX_RANGE);
setFocusPolicy(Qt::StrongFocus);
// 键盘左右键的步进值
this->setSingleStep(1);
// 鼠标点击的步进值
this->setPageStep(5);
}
void LectureCorrectSliderForm::setScoreValue(int value)
{
if (value < DEF_MIN_RANGE || value > DEF_MAX_RANGE) {
this->setValue(DEF_MIN_RANGE);
return;
}
this->setValue(value);
}
void LectureCorrectSliderForm::mousePressEvent(QMouseEvent *event)
{
emit valueChanged(this->value());
QSlider::mousePressEvent(event);
}
void LectureCorrectSliderForm::mouseReleaseEvent(QMouseEvent *event)
{
emit valueChanged(this->value());
QSlider::mouseReleaseEvent(event);
}
void LectureCorrectSliderForm::mouseMoveEvent(QMouseEvent *event)
{
emit valueChanged(this->value());
QSlider::mouseMoveEvent(event);
}
使用的时候,直接将自己的类提升为LectureCorrectBoxSliderForm
四、还可以使用系统stylesheet语法来自定义滑动条
1.效果如图
2.qss代码
/* 需要先设置groove,水平滑动条*/
QSlider#customSlider::groove:horizontal {
border: none;
height: 6px;
border-radius: 3px;
background: lightgray;
}
QSlider#customSlider::handle:horizontal {
border: none;
margin: -5px 0px; /* 上下边距和左右边距*/
width: 16px;
height: 16px;
border-radius: 8px;
background: #e83c3c;
border-image: url(:/images/white.png);
}
/*划过部分*/
QSlider#customSlider::sub-page:horizontal {
background: red;
height: 4px;
border-radius: 3px;
}
/*未划过部分*/
QSlider#customSlider::add-page:horizontal {
background: lightgray;
height: 4px;
border-radius: 3px;
}
图片文件在中间(透明)
→←
图片文件在中间
五、设置小数值
QString strValue = "35.725";
// 设置文本
ui->progressBar->setFormat(QString("%1%").arg(strValue));
// 设置进度条进度
ui->progressBar->setValue(35);