QSS定制自定义QSlider
发布时间:2020-12-14 17:02:45 所属栏目:大数据 来源:网络整理
导读:QSS定制自定义QSlider ? (2011-05-16 11:05:45) 转载 标签: ? qt ? qss ? qslider ? 自定义 ? 滑块 ? 图片 ? it ? 花了不少时间学习qss,终于绘制出满意的QSlider了,效果图: 因为图是1280*720的,所以看起来优点扁。使用QSS设计时最大的建议是使用Qt Desi
QSS定制自定义QSlider? (2011-05-16 11:05:45)
转载
花了不少时间学习qss,终于绘制出满意的QSlider了,效果图:
因为图是1280*720的,所以看起来优点扁。使用QSS设计时最大的建议是使用Qt Designer,它有直观的style sheet设置窗口,可以直观的看到效果;其次,参考Qt Assist -->?
下面来看看具体的QSS脚本的作用:
QSlider中有四个比较重要的辅助控制器(subcontrol),groove表示槽的部分,handle表示滑块,add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要和slider对象的方向一致,如果slider是vertical的,QSS设定的是horizontal的,那么是看不到效果的。
进行QSlider设计时,groovy的左右一定要留有一定的空间,这样是防止滑块滑到两端时被遮盖,所以groovy需要设置left和right属性。
"QSlider::groove:horizontal { ?
" ?
" ?
" ?
" ?
" } ?
滑块方面,如果设计的是突出的滑块,需要指定maegin或者border为负值进行外扩即可。
"QSlider::handle:horizontal { ?
" ?
" ?
" ?
" ?
" } ?
已滑过的槽部分直接填充颜色即可,没有必要贴图,如果需要立体的效果可以通过线性渐变进行填充,线性渐变通过起始点和终止点的坐标指定的是填充方向,通过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,stop:0.5 rgba(154,30,158,stop:1 rgba(173,57,176,255)); ?
"} ?
就这样,一个完美的QSlider就出现了!各位可以根据自己的实际情况进行修改。
完整的代码:
slider->setStyleSheet(
"QSlider::groove:horizontal { ?
" ?
" ?
" ?
" ?
" } ?
"QSlider::handle:horizontal { ?
" ?
" border-image:url(image/skin2/Toolsicon/volumnslider.png);"
" ?
" ?
" } ?
" ?
"QSlider::sub-page:horizontal{ ?
" background: qlineargradient(spread:pad,255)); ?
"} ?
"QSlider::add-page:horizontal{ ?
" background-image:url(image/skin2/Toolsicon/volumn.png) ?
"}"
);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |