Qt 自定义 滚动条 样式

Qt 自定义 滚动条 样式

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

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

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

　　1.写入到文件中，新建个xx.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());

 

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

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;"                                                   "}"                                                   );