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 就是滚动条上下箭头之间区域的样式设置