本文章主要学习QSlider样式
准备下面几张背景图片：
调小图标
QSlider划过的背景图标
最终效果图
自己创建一个QSlider工程，此处省略……
编写mainwindow.h文件
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QSlider>
6 #include <QPushButton>
7
8
9 class MainWindow : public QMainWindow
10 {
11 Q_OBJECT
12
13 public:
14 explicit MainWindow(QWidget *parent = 0);
15 private slots:
16 void BtnLeftClick();
17 void BtnRightClick();
18 private:
19 QSlider *pQSlider;
20 };
21
22 #endif // MAINWINDOW_H
编写mainwindow.cpp文件
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent) :
4 QMainWindow(parent)
5 {
6 this->resize(QSize(360,90));
7 this->setStyleSheet("background-color:rgb(43,45,55);border:none;");
8
9 QPushButton *pBtnL = new QPushButton(this);
10 QPushButton *pBtnR = new QPushButton(this);
11 pQSlider = new QSlider(Qt::Horizontal,this);
12
13 pBtnL->setGeometry(30,24,32,34);
14 pQSlider->setGeometry(70,20,220,40);
15 pBtnR->setGeometry(300,20,32,34);
16
17
18 pBtnL->setStyleSheet("outline:none;border-image: url(:/btn_del.png)");
19 pBtnR->setStyleSheet("outline:none;border-image: url(:/btn_add.png)");
20
21 //设置不可用,不可滑动
22 pQSlider->setEnabled(false);
23 pQSlider->setStyleSheet("QSlider::groove:horizontal{
24 height: 12px;
25 left: 5px;
26 right: 5px;
27 border-image: url(:/qslider_bg.png);
28 }
29 QSlider::handle:horizontal{
30 border-radius: 20px;
31 40px;
32 height: 40px;
33 margin-top: -10px;
34 margin-left: -10px;
35 margin-bottom: -20px;
36 margin-right: -10px;
37 border-image:url(:/qslider_btn.png);}
38 QSlider::sub-page:horizontal{border-image: url(:/qslider.png);}");
39
40
41 //设置最小值、最大值
42 pQSlider->setMinimum(0);
43 pQSlider->setMaximum(16);
44
45 //设置初始值
46 pQSlider->setValue(4);
47
48 //关联信号槽
49 connect(pBtnL,SIGNAL(clicked()),this,SLOT(BtnLeftClick()));
50 connect(pBtnR,SIGNAL(clicked()),this,SLOT(BtnRightClick()));
51 }
52
53 void MainWindow::BtnLeftClick()
54 {
55 if(pQSlider->value() > 0)
56 {
57 pQSlider->setValue(pQSlider->value()-1);
58 }
59 }
60
61 void MainWindow::BtnRightClick()
62 {
63 if(pQSlider->value() < 16)
64 {
65 pQSlider->setValue(pQSlider->value()+1);
66 }
67 }
编写main.cpp文件
1 #include "mainwindow.h"
2 #include <QApplication>
3
4 int main(int argc, char *argv[])
5 {
6 QApplication a(argc, argv);
7 MainWindow w;
8 w.show();
9
10 return a.exec();
11 }
es.qrc内容如下图所示
