QT 滑动条和滚动条的样式

1.滑动条

滑动条的设置

 QSlider{  background-image: url(:/images/slider.svg);  } 
 QSlider::groove:horizontal { 
                                  border: 0px solid #999999;  
                                  height: 2px; 
                                  margin: 0px; 
                                  left: 0px; right: 0px; 
                              }

 

滑块的设置

QSlider::handle:horizontal {
                                border: 0px solid #5c5c5c; 
                                border-image:url(:/images/slidergoop.svg); 
                                width: 50px; 
                                margin: -25px -4px -25px -4px;
                             }

代码

setStyleSheet("QSlider{ \
                                    background-image: url(:/images/slider.svg); \
                              } \
                              QSlider::groove:horizontal { \
                                                  border: 0px solid #999999;  \
                                                  height: 2px; \
                                                  margin: 0px; \
                                                  left: 0px; right: 0px; \
                              } \
                              QSlider::handle:horizontal {\
                                                  border: 0px solid #5c5c5c; \
                                                   border-image:url(:/images/slidergoop.svg); \
                                                   width: 50px; \
                                                   margin: -25px -4px -25px -4px;\
                              };");

2.滚动条的样式

滚动条设置

1 QScrollBar::vertical {
2                   background:rgb(63,70,87);
3                   border:0px solid grey;
4                   width: 30px;
5                   margin:40px 0px 40px 0px;
6                }

滑动的滑块设置           

1 QScrollBar::handle:vertical {
2                background: rgb(108,113,125);
3                border: 1px solid grey;
4                border-radius:3px;
5                min-height: 20px;
6                width:30px;
7                }

上面箭头的设置

 1  QScrollBar::add-line:vertical {
 2                   height: 40px;
 3                   subcontrol-origin:margin;
 4               }
 5 
 6 QScrollBar::up-arrow:vertical {
 7                  subcontrol-origin: margin; 
 8                  height: 40px;
 9                  border:0 0 0 0;
10                  border-image: url(:images/6.png);
11               }

下面箭头的设置            

 1  QScrollBar::sub-line:vertical {
 2                   height: 40px;
 3                   subcontrol-origin:margin;
 4               }
 5 
 6   QScrollBar::down-arrow:vertical { 
 7                  subcontrol-origin: margin; 
 8                  height: 40px;
 9                  border-image: url(:images/7.png);
10               }

代码如下

 1 setStyleSheet("QScrollBar::vertical {\
 2                   background:rgb(63,70,87);\
 3                   border:0px solid grey;\
 4                   width: 30px;\
 5                   margin:40px 0px 40px 0px;\
 6                }\
 7                QScrollBar::handle:vertical {\
 8                background: rgb(108,113,125);\
 9                border: 1px solid grey;\
10                border-radius:3px;\
11                min-height: 20px;\
12                width:30px;\
13                }\
14                QScrollBar::add-line:vertical {\
15                   height: 40px;\
16                   subcontrol-origin:margin;\
17               }\
18               QScrollBar::sub-line:vertical {\
19                   height: 40px;\
20                   subcontrol-origin:margin;\
21               }\
22               QScrollBar::up-arrow:vertical {\
23                  subcontrol-origin: margin; \
24                  height: 40px;\
25                  border:0 0 0 0;\
26                  border-image: url(:images/6.png);\
27               }\
28               QScrollBar::down-arrow:vertical { \
29                  subcontrol-origin: margin; \
30                  height: 40px;\
31                  border-image: url(:images/7.png);\
32               }\
33     ");

 

 

 

posted on 2018-07-18 18:22  小小小哈  阅读(8441)  评论(1)  编辑  收藏  举报

导航