Qt-滚动条QSS样式
mainwindow.cpp
1 #include "mainwindow.h"
2 #include "ui_mainwindow.h"
3
4 MainWindow::MainWindow(QWidget *parent)
5 : QMainWindow(parent)
6 , ui(new Ui::MainWindow)
7 {
8 ui->setupUi(this);
9
10 // 设置垂直滚动条基本样式
11 ui->scrollArea->setStyleSheet("QScrollBar:vertical"
12 "{"
13 "width:8px;"
14 "background:rgba(255,0,0,0%);"
15 "margin:0px,0px,0px,0px;"
16 // "padding-top:9px;"// 留出9px给上面和下面的箭头
17 // "padding-bottom:9px;"
18 "}"
19 "QScrollBar::handle:vertical"
20 "{"
21 "width:8px;"
22 "background:rgba(255,0,0,25%);"
23 " border-radius:4px;"// 滚动条两端变成椭圆
24 "min-height:20;"
25 "}"
26 "QScrollBar::handle:vertical:hover"
27 "{"
28 "width:8px;"
29 "background:rgba(255,0,0,50%);"// 鼠标放到滚动条上的时候，颜色变深
30 " border-radius:4px;"
31 "min-height:20;"
32 "}"
33 "QScrollBar::add-line:vertical"
34 "{"
35 "height:9px;width:8px;"
36 "border-image:url(:/images/a/3.png);"// 这个应该是设置下箭头的，3.png就是箭头
37 "subcontrol-position:bottom;"
38 "}"
39 "QScrollBar::sub-line:vertical"
40 "{"
41 "height:9px;width:8px;"
42 "border-image:url(:/images/a/1.png);" // 设置上箭头
43 "subcontrol-position:top;"
44 "}"
45 "QScrollBar::add-line:vertical:hover"
46 "{"
47 "height:9px;width:8px;"
48 "border-image:url(:/images/a/4.png);"// 当鼠标放到下箭头上的时候
49 "subcontrol-position:bottom;"
50 "}"
51 "QScrollBar::sub-line:vertical:hover"
52 "{"
53 "height:9px;width:8px;"
54 "border-image:url(:/images/a/2.png);"// 当鼠标放到下箭头上的时候
55 "subcontrol-position:top;"
56 "}"
57 "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical"// 当滚动条滚动的时候，上面的部分和下面的部分
58 "{"
59 "background:rgba(255,0,0,10%);"
60 "border-radius:4px;"
61 "}"
62 );
63 }
64
65 MainWindow::~MainWindow()
66 {
67 delete ui;
68 }
滚动条有两种，水平的和垂直的，我这里面只设置了垂直的，水平的其实差不多，只需要把 vertical 换成 horizontal。
1 ui->scrollArea->setStyleSheet(
2 "QScrollBar:horizontal{"
3 "background:rgba(255,0,0,0%);"
4 "margin:0px,0px,0px,0px;"
5 "height:8px;}"
6
7 "QScrollBar::handle:horizontal{"
8 "background:rgba(255,0,0,25%);"
9 "border-radius:4px;"
10 "min-width:20px;}"
11
12 "QScrollBar::handle:horizontal:hover{"
13 "height:8px;"
14 "background:rgba(255,0,0,50%);"
15 "border-radius:4px;"
16 "min-width:20;}"
17
18 "QScrollBar::add-line:horizontal{"
19 "background:url(:/images/resource/images/checkout/right.png) center no-repeat;}"
20
21 "QScrollBar::sub-line:horizontal{"
22 "background:url(:/images/resource/images/checkout/left.png) center no-repeat;}"
23
24 "QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal"
25 "{"
26 "background:rgba(255,0,0,10%);"
27 "border-radius:4px;"
28 "}"
29 );
