Qt-滚动条QSS样式

相关资料：

 https://blog.csdn.net/weixin_30608131/article/details/95468028?utm_medium=distribute.pc_relevant.none-task-blog-searchFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-searchFromBaidu-1.control

 

 

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 }
View Code

 

 滚动条有两种，水平的和垂直的，我这里面只设置了垂直的，水平的其实差不多，只需要把 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 );
View Code

 

posted on 2020-11-20 20:44  疯狂delphi  阅读(567)  评论(0)  编辑  收藏  举报

导航