qslider qss使用

说明:
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");

你可能感兴趣的:(QT)