Chinaunix首页 | 论坛 | 博客
  • 博客访问: 300639
  • 博文数量: 71
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 564
  • 用 户 组: 普通用户
  • 注册时间: 2014-07-20 18:15
个人简介

用编程改变大众。。。

文章分类

全部博文(71)

文章存档

2016年(7)

2015年(54)

2014年(10)

我的朋友

分类: C/C++

2015-05-08 11:04:03

花了不少时间学习qss,终于绘制出满意的QSlider了,效果图:


因为图是1280*720的,所以看起来优点扁。使用QSS设计时最大的建议是使用Qt Designer,它有直观的style sheet设置窗口,可以直观的看到效果;其次,参考Qt Assist --> Qt Style Sheets --> QSlider(当然也能找到其他的类) --> Customizing QSlider,基本就能掌握QSlider的设计了。

 

下面来看看具体的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 {                                "

"     border: 1px solid #999999;                             "

"     height: 2px;                                           "

"     margin: 0px 0;                                         "

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

" }                                                          "

 

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

"QSlider::handle:horizontal {                                "

"     border: 1px solid #5c5c5c;                             "

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

"     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)   "

"}"

);

 

阅读(3622) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~