QT 自定义滑动条（上方有实时方框显示数值，且带有刻度值）

一、效果图

这种滑动条是控件所拼接而成

二、原理

（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);