Qt QSS之QSlider滑动条美化

  首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很多,选择器要少,可以使用的QSS属性也要少很多,并不是所有的属性都可以用在Qt的所有控件上。
下面我们来使用qss对滑动条slider进行美化。先上图。
Qt QSS之QSlider滑动条美化

   这里蓝色背景并非用qss美化,主要研究滑动条的美化过程。

 1 //滑动条槽(整体)的美化
 2 QSlider::groove:horizontal{ 
 3         height: 12px; 
 4         left: 0px; 
 5         right: 0px; 
 6         border:0px;    //指定无边框
 7         border-radius:6px;    //指定圆角
 8         background:rgba(0,0,0,50);
 9  } 
10  //滑块的美化
11  QSlider::handle:horizontal{ 
12         width:  50px; 
13         height: 50px; 
14         margin-top: -20px; 
15         margin-left: 0px; 
16         margin-bottom: -20px; 
17         margin-right: 0px; 
18          border-image:url(:/res/images/setting_slider_handle.png);
19 } 
20 //已滑过的进度美化
21 QSlider::sub-page:horizontal{
22        background:rgba(80,166,234,1);
23 }

  这里解释一下,我们只用到groove,handle,sub-page这3个属性,就可完成属性,未滑过的颜色就是groove的颜色。当然也能指定未滑过部分的颜色即:

1 QSlider::add-page:horizontal
2 {
3 background: rgb(0,0,255);
4 }

  注意的是groove,sub-page,add-page三个属性共存时,add-page颜色会覆盖groove的颜色。如果滑块需要外扩比槽部分大,那么可以使用margin参数,当然QSilder测整体高度必须大于或等于滑块的高度,否则滑块会被压缩。
  我们例子滑块使用的是图片 ,groove,handle,sub-page,add-page这些既可以用颜色填充也可以用图片填充,要看自己需求。当然如果要炫一点可以用线性渐变颜色,

background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd);

来定义自己的渐变颜色。
  此外我们还可以对这些部件不同状态的一些指定比如,hover,disable

 1 QSlider::handle:horizontal:hover {
 2         width:  50px; 
 3         height: 50px; 
 4         margin-top: -20px; 
 5         margin-left: 0px; 
 6         margin-bottom: -20px; 
 7         margin-right: 0px; 
 8          border-image:url(:/res/images/setting_slider_handle_hover.png);
 9 }
10 QSlider::sub-page:horizontal:disabled {
11         background: #BB345F;
12 }
13 QSlider::add-page:horizontal:disabled {
14         background: #1ADEFF;
15 }
16 QSlider::handle:horizontal:disabled {
17         background: #EEDDFF;
18 }

这样在hover或者设置无效状态时,颜色就有改变。

 

上一篇:进程间的信号


下一篇:关于Go语言,你可能会讨厌的五件事