本文章主要学习QSlider样式

准备下面几张背景图片：

调小图标

、调大图标

​、QSlider位置图标

​QSlider划过的背景图标

​、QSlider未划过的背景图标

​最终效果图

自己创建一个QSlider工程，此处省略……

CSDN QT大纲：Qt开发必备技术栈学习路线和资料

编写mainwindow.h文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include 
#include 
#include class MainWindow : public QMainWindow
{Q_OBJECTpublic:explicit MainWindow(QWidget *parent = 0);
private slots:void    BtnLeftClick();void    BtnRightClick();
private:QSlider     *pQSlider;
};#endif // MAINWINDOW_H

编写mainwindow.cpp文件

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent)
{this->resize(QSize(360,90));this->setStyleSheet("background-color:rgb(43,45,55);border:none;");QPushButton *pBtnL      = new QPushButton(this);QPushButton *pBtnR      = new QPushButton(this);pQSlider   = new QSlider(Qt::Horizontal,this);pBtnL->setGeometry(30,24,32,34);pQSlider->setGeometry(70,20,220,40);pBtnR->setGeometry(300,20,32,34);pBtnL->setStyleSheet("outline:none;border-image: url(:/btn_del.png)");pBtnR->setStyleSheet("outline:none;border-image: url(:/btn_add.png)");//设置不可用,不可滑动pQSlider->setEnabled(false);pQSlider->setStyleSheet("QSlider::groove:horizontal{ \height: 12px; \left: 5px; \right: 5px; \border-image: url(:/qslider_bg.png);\} \QSlider::handle:horizontal{ \border-radius: 20px; \width:  40px; \height: 40px; \margin-top: -10px; \margin-left: -10px; \margin-bottom: -20px; \margin-right: -10px; \border-image:url(:/qslider_btn.png);} \QSlider::sub-page:horizontal{border-image: url(:/qslider.png);}");//设置最小值、最大值pQSlider->setMinimum(0);pQSlider->setMaximum(16);//设置初始值pQSlider->setValue(4);//关联信号槽connect(pBtnL,SIGNAL(clicked()),this,SLOT(BtnLeftClick()));connect(pBtnR,SIGNAL(clicked()),this,SLOT(BtnRightClick()));
}void MainWindow::BtnLeftClick()
{if(pQSlider->value() > 0){pQSlider->setValue(pQSlider->value()-1);}
}void MainWindow::BtnRightClick()
{if(pQSlider->value() < 16){pQSlider->setValue(pQSlider->value()+1);}
}

编写main.cpp文件

#include "mainwindow.h"
#include int main(int argc, char *argv[])
{QApplication a(argc, argv);MainWindow w;w.show();return a.exec();
}

es.qrc内容如下图所示

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓