QSS定制自定义QSlider

来源：互联网发布：防火墙拦截udp端口编辑：程序博客网时间：2024/05/08 13:30

转自：http://blog.csdn.net/sdljlcming/article/details/8306356

QSlider中有四个比较重要的辅助控制器（subcontrol），groove表示槽的部分，handle表示滑块，add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器后面可以设置状态，horizontal就是QSS生效的QSlider的状态，注意这里设置的方向一定要和slider对象的方向一致，如果slider是vertical的，QSS设定的是horizontal的，那么是看不到效果的。

进行QSlider设计时，groovy的左右一定要留有一定的空间，这样是防止滑块滑到两端时被遮盖，所以groovy需要设置left和right属性。

"QSlider::groove:horizontal "
"{ "
" border: 10px solid #999999; "
" height: 5px; "
" margin: 0px 0; "
" left: 12px; right: 12px; "
" border-image:url(:/file/images/process.png); "
" } "

滑块方面，如果设计的是突出的滑块，需要指定margin或者border为负值进行外扩即可。

"QSlider::handle:horizontal "
"{ "
" border: 1px solid #5c5c5c; "
" border-image:url(:/file/images/pd.png); "
" width: 18px; "
" margin: -7px -7px -7px -7px; "
" } "

m_slider->setStyleSheet(
"QSlider::groove:horizontal "
"{ "
" border-image:url(:/file/images/process.png); "
" border: 10px; "
" height: 5px; "
" margin: 0px; "
" left: 18px; right: 18px; "
" } "
"QSlider::handle:horizontal "
"{ "
" border-image:url(:/file/images/pd.png); "
" border: 1px; "
" width: 18px; "
" margin: -7px -7px -7px -7px; "
" } "
);

=========================================================================================================================

(以下是别人的例子)

已滑过的槽部分直接填充颜色即可，没有必要贴图，如果需要立体的效果可以通过线性渐变进行填充，线性渐变通过起始点和终止点的坐标指定的是填充方向，通过stop指定当前rgba值，起始点值为0，终止点值为1,，示例的效果是凸起，依靠强悍的美工给我的图，层层萃取出来的rgb值，填上后才呈现出来的。（执着的程序员呀）

"QSlider::sub-page:horizontal{ "

" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255)); "

"} "

就这样，一个完美的QSlider就出现了！各位可以根据自己的实际情况进行修改。

完整的代码：

slider->setStyleSheet(

"QSlider::groove:horizontal { "

" border: 1px solid #999999; "

" height: 2px; "

" margin: 0px 0; "

" left: 12px; right: 12px; "

" } "

"QSlider::handle:horizontal { "

" border: 1px solid #5c5c5c; "

" border-image:url(image/skin2/Toolsicon/volumnslider.png);"

" width: 18px; "

" margin: -7px -7px -7px -7px; "

" } "

" "

"QSlider::sub-page:horizontal{ "

" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255)); "

"} "

"QSlider::add-page:horizontal{ "

" background-image:url(image/skin2/Toolsicon/volumn.png) "

"}"

);