QScrollBar 的css 设置详解

本文主要介绍QScrollBar的样式表设置的问题

setStyleSheet(QString::fromUtf8("\
QScrollBar::vertical {\
background:rgb(63,70,87);\
border:0px solid grey;\
width: 30px;\
margin:30px 0px 30px 0px;\
}\
QScrollBar::handle:vertical {\
background: rgb(108,113,125);\
border: 1px solid grey;\
border-radius:0px;\
min-height: 20px;\
width:30px;\
}\
QScrollBar::add-line:vertical {\
height: 30px;\
subcontrol-origin:margin;\
}\
QScrollBar::sub-line:vertical {\
height: 30px;\
subcontrol-origin:margin;\
}\
QScrollBar::up-arrow:vertical {\
subcontrol-origin: margin; \
height: 31px;\
border:0 0 0 0;\
border-image: url(:images/uparrow.png);\
}\
QScrollBar::down-arrow:vertical { \
subcontrol-origin: margin; \
height: 31px;\
border-image: url(:images/downarrow.png);\
}\
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {\
background: none;\
border:0,0,0,0;\
}\
QScrollArea {\
border:0,0,0,0;\
background:rgb(63,70,87);\
}\
"));

1、 QScrollBar::vertical 设置纵向滚动条，水平的为horizon,默认的分别在下面和右边。主要注意的是margin:30px 0px 30px 0px;一定要有，否则上下箭头可能看不到了。

2、QScrollBar::handle:vertical 纵向滚动条中间滑动的句柄设置，min-height: 20px;这个表示最小高度

3、 QScrollBar::add-line 为滚动条下面的箭头区域，点一下往下走一行的那个，sub-line则是上面的

height: 30px;\

subcontrol-origin:margin;\

必须的

4、 QScrollBar::up-arrow down-arrow上下箭头，高度应稍大好看些

5、QScrollArea 就是滚动条上下箭头之间区域的样式设置