说明:
QSlider中有四个比较重要的辅助控制器(subcontrol)
groove表示槽的部分
handle表示滑块
add-page表示未滑过的槽部分
sub-page表示已滑过的槽部分
在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要和slider对象的方向一致,如果slider是vertical的,QSS设定的是horizontal的,那么是看不到效果的。
先在qss文件定义
/*横向滑动条的两种样式*/
QSlider[STYLE_KEY="WHITE_SLIDER"]:horizontal
{ /*这里写成这个样子是为了让圆心与左边的边对齐,其中 6px是半径,
下面与之相关的还有QSlider[STYLE_KEY="WHITE_SLIDER"]::groove:horizontal 的
padding-left: -6px;
padding-right: -6px;
*/
border-left: 6px;
border-right: 6px;
border-style: solid;
border-color: rgba(0,0,0,0);
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::groove:horizontal
{
border: 0px solid #bbb;
height: 4px;
padding-left: -6px;
padding-right: -6px;
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::sub-page:horizontal
{
background: #FFFFFF;
border: 0px solid #777;
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::add-page:horizontal
{
background: #85a8bf;
border: 0px solid #777;
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::handle:horizontal
{
/* border-radius =宽度/2 */
/*球形滑块 需要定义外边距:value = (滑块高度-槽高度)/2*(-1) */
background: #0d669b;
border: 0px solid #777;
width: 12px;
height: 12px;
margin-top: -4px;
margin-bottom: -4px;
border-radius: 6px;
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::handle:horizontal:hover
{
background: #005a90;
}
第二步
qapp.setstylesheet(qss);
第三步
qslider->setProperty("STYLE_KEY","WHITE_SLIDER");