1. 程式人生 > >QScrollBar 的css 設定詳解

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 就是滾動條上下箭頭之間區域的樣式設定