Qt 自定义滚动条样式

傷城~ 2022-08-04 04:18 314阅读 0赞

##     ##

今天是时候把软件中的进度条给美化美化了，最初的想法就是仿照QQ。

先前的进度条是这样![11163913-081132ea578649779a333310eebb3dc4.png][]，默认的总是很难受欢迎的；美化之后的是这样![11164018-828dafd9adbe4862bc9e74d01318e3f7.png][]，怎么样？稍微好看一点点了吧，最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式。下面就来吐槽吐槽，关于进度条样式的设置问题，欢迎评论交流，高手勿喷。

Qt设置样式的方式有两种，一种直接在程序中写，适用于样式不多的情况；另一种，写入到文件中，适用用样式较大且需要提供换肤功能的情况。

1.写入到文件中，新建个xx.qss，然后复制一下内容

![复制代码][copycode.gif]

// 设置垂直滚动条基本样式
    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;
    }

![复制代码][copycode.gif]

接着在程序中读取文件

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

2.直接在程序中设置，简单

![复制代码][copycode.gif]

listWidget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical"
                                                       "{
          "
                                                       "width:8px;"
                                                       "background:rgba(0,0,0,0%);"
                                                       "margin:0px,0px,0px,0px;"
                                                       "padding-top: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"
                                                       "{
          "
                                                       "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;"
                                                       "}"
                                                       );

![复制代码][copycode.gif]

滚动条有两种，水平的和垂直的，我这里面只设置了垂直的，水平的其实差不多，只需要把 vertical 换成 horizontal。

更多的自定义样式可以参考[http://www.zhouwenyi.com/name/193435][http_www.zhouwenyi.com_name_193435]，有点乱不过还能用，具体的意思我在上面已经添加注释。

样式中设计到一些图片，如果您需要源代码例子，请下载：[ListWidget.rar][].

转载请标明出处哦：[http://www.cnblogs.com/xufeiyang/p/3314955.html][http_www.cnblogs.com_xufeiyang_p_3314955.html]

[11163913-081132ea578649779a333310eebb3dc4.png]: http://images.cnitblog.com/blog/139196/201309/11163913-081132ea578649779a333310eebb3dc4.png
[11164018-828dafd9adbe4862bc9e74d01318e3f7.png]: /images/20220731/9062368e5a324c5ea074417ce9b89cdd.png
[copycode.gif]: /images/20220731/8ef2e52b41d24c4c87ecd5bf6783e9b2.png
[http_www.zhouwenyi.com_name_193435]: http://www.zhouwenyi.com/name/193435
[ListWidget.rar]: http://files.cnblogs.com/xufeiyang/listWidget.rar
[http_www.cnblogs.com_xufeiyang_p_3314955.html]: http://www.cnblogs.com/xufeiyang/p/3314955.html