設置QScrollBar(垂直與水平)滾動條樣式

https://my.oschina.net/u/221120/blog/634053?p=1

 

ui->QTableView->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{"        //垂直滑塊整體  
                                                          "background:#FFFFFF;"  //背景色  
                                                          "padding-top:20px;"    //上預留位置（放置向上箭頭）  
                                                          "padding-bottom:20px;" //下預留位置（放置向下箭頭）  
                                                          "padding-left:3px;"    //左預留位置（美觀）  
                                                          "padding-right:3px;"   //右預留位置（美觀）  
                                                          "border-left:1px solid #d7d7d7;}"//左分割線  
                                                          "QScrollBar::handle:vertical{"//滑塊樣式  
                                                          "background:#dbdbdb;"  //滑塊顏色  
                                                          "border-radius:6px;"   //邊角圓潤  
                                                          "min-height:80px;}"    //滑塊最小高度  
                                                          "QScrollBar::handle:vertical:hover{"//鼠標觸及滑塊樣式  
                                                          "background:#d0d0d0;}" //滑塊顏色  
                                                          "QScrollBar::add-line:vertical{"//向下箭頭樣式  
                                                          "background:url(:/images/down.png) center no-repeat;}"  
                                                          "QScrollBar::sub-line:vertical{"//向上箭頭樣式  
                                                          "background:url(:/images/up.png) center no-repeat;}");  
  
ui->QTableView->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal{"  
                                                          "background:#FFFFFF;"  
                                                          "padding-top:3px;"  
                                                          "padding-bottom:3px;"  
                                                          "padding-left:20px;"  
                                                          "padding-right:20px;}"  
                                                          "QScrollBar::handle:horizontal{"  
                                                          "background:#dbdbdb;"  
                                                          "border-radius:6px;"  
                                                          "min-width:80px;}"  
                                                          "QScrollBar::handle:horizontal:hover{"  
                                                          "background:#d0d0d0;}"  
                                                          "QScrollBar::add-line:horizontal{"  
                                                          "background:url(:/images/right.png) center no-repeat;}"  
                                                          "QScrollBar::sub-line:horizontal{"  
                                                          "background:url(:/images/left.png) center no-repeat;}");  

 

 

新建scrollBar.qss文件

// 設置垂直滾動條基本樣式
QScrollBar:vertical
{
    width:8px;
    background:rgba(0,0,0,0%);
    margin:0px,0px,0px,0px;
    padding-top:9px;   // 留出9px給上面和下面的箭頭
    padding-bottom:9px;
}
QScrollBar::handle:vertical
{
    width:8px;
    background:rgba(0,0,0,25%);
    border-radius:4px;   // 滾動條兩端變成橢圓
    min-height:20;
}
QScrollBar::handle:vertical:hover
{
    width:8px;
    background:rgba(0,0,0,50%);   // 鼠標放到滾動條上的時候，顏色變深
    border-radius:4px;
    min-height:20;
}
QScrollBar::add-line:vertical   // 這個應該是設置下箭頭的，3.png就是箭頭
{
    height:9px;width:8px;
    border-image:url(:/images/a/3.png);
    subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical   // 設置上箭頭
{
    height:9px;width:8px;
    border-image:url(:/images/a/1.png);
    subcontrol-position:top;
}
QScrollBar::add-line:vertical:hover   // 當鼠標放到下箭頭上的時候
{
    height:9px;width:8px;
    border-image:url(:/images/a/4.png);
    subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical:hover  // 當鼠標放到下箭頭上的時候
{
    height:9px;width:8px;
    border-image:url(:/images/a/2.png);
    subcontrol-position:top;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical   // 當滾動條滾動的時候，上面的部分和下面的部分
{
    background:rgba(0,0,0,10%);
    border-radius:4px;
}

 

 

在程序中讀取文件，調用文件中的設置，代碼如下：

 

QFile file(":/scrollbar.qss");
file.open(QFile::ReadOnly);
listWidget->verticalScrollBar()->setStyleSheet(file.readAll());

 

 

 

直接在程序中設置，適用於不復雜的格式，本次試驗就是直接寫入程序中，代碼示例如下：

 

 textEdit->verticalScrollBar()->setStyleSheet(

                                                 "QScrollBar{ background: #F0F0F0; width:30px ;margin-top:16px;margin-bottom:16px }"
                                                 "QScrollBar::handle:vertical{ background: #EAEAED; min-height: 80px ;width:30px }"
                                                 "QScrollBar::sub-line:vertical{height:16px;subcontrol-position:top;subcontrol-origin:margin;}"
                                                 "QScrollBar::add-line:vertical{height:16px;subcontrol-position:bottom;subcontrol-origin:margin;}"
                                                 );

 

 

這樣就能把設置滾動條的寬度、滑塊大小及上下邊緣箭頭。需要其他設計可參考上述文件中設計的詳細格式。

特別注意：

       在設置滑塊屬性時，一定要先設置QScrollBar 和 QScrollBar::handle:vertical 的背景顏色或圖片，不然設置其他屬性不生效，親測可用。


本文針對垂直滾動條進行示例說明，水平滾動條也類似。只需要把vertical 換成 horizontal 即可。