zoukankan      html  css  js  c++  java
  • Qt QSS之QSlider滑动条美化

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

       这里蓝色背景并非用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           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           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或者设置无效状态时,颜色就有改变。

  • 相关阅读:
    深入剖析.NET运行机制
    在浏览器地址中加参数
    mysql 中文乱码
    今天在看一些面试题的时候遇到的一个关于strcmp()返回值的细节问题
    如何在学习过程中统一IDE的编码!
    通过文件方式,在文件内容开头写入字符串!
    Java编写圆的相关计算
    leetcode 上的Counting Bits 总结
    cocos2dx打包apk
    CEGUI0.8.4例子
  • 原文地址:https://www.cnblogs.com/ybqjymy/p/14711745.html
Copyright © 2011-2022 走看看