设置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 即可。