标签：comm 吐槽 技术分享 hover src line 意思 qss 鼠标
今天是时候把软件中的进度条给美化美化了，最初的想法就是仿照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;"
"}"
);
滚动条有两种，水平的和垂直的，我这里面只设置了垂直的，水平的其实差不多，只需要把 vertical 换成 horizontal。
更多的自定义样式可以参考http://www.zhouwenyi.com/name/193435，有点乱不过还能用，具体的意思我在上面已经添加注释。
样式中设计到一些图片，如果您需要源代码例子，请下载：ListWidget.rar.
转载请标明出处哦：http://www.cnblogs.com/xufeiyang/p/3314955.html
标签：comm 吐槽 技术分享 hover src line 意思 qss 鼠标
原文地址：http://www.cnblogs.com/findumars/p/6209712.html
