什么是QSSQSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容,只不过QSS的功能比CSS要弱很多,体现在选择器要少,可以使用的QSS属性也要少很多,并且并不是所有的属性都可以用在Qt的所有控件上。 QSS在Qt程序中的使用办法首先将QSS写在文件中,然后利用如下的代码设置QSS:
该段代码写在ui界面的后台cpp文件的构造函数中,主要是this->setStyleSheet()函数的设置功能,要说明的是该函数除了可以对整个当前构造数所在的那个类所表示的ui进行整体应用样式以外,setStyleSheet()函数本身是QWidget的成员函数,几乎Qt中的大多数控件都可以直接使用该函数分别设置自己的样式。 QSS的语法规则QSS的语法规则几乎与CSS相同。一条QSS的样式是由两部分组成的,一部分是选择器指定了哪些控件会受到影响,另一部分是指定了属性的值,表示这些控件的哪些属性会受到影响。例如: QPushButton { color: red } QPushButton表示选择器,指定了所有的QPushButton或者是QPushButton的子类会受到影响,注意凡是继承自QPushButton的子类也会受到影响,这是与CSS中不同的地方,因为CSS应用的都是一些标签,没有类的层次结构,更加没有子类的概念。而后面的{color:red}则是规则的定义,表明指定前景颜色是红色。整个意思就是设置QPushButton类以及其子类的所有实例的前景色是红色。 MyButton{color:red} 则只会对MyButton的实例应用红色的前景颜色,而对QPushButton的实例没有应用。 QSS的选择器类型1.通配选择器:* ; 匹配所有的控件 另外上面所有的这些选择器可以联合使用,并且支持一次设置多个选择器类型,用逗号隔开,这点与CSS一样,例如#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。#mytable QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例 QSS子控件QSS的子控件实际上也是选择器的一种,因为这种选择器与CSS有一些不同,所以单独拿出来说,QSS的子控件选择器是应用在一些复合控件上的,典型的例如QComboBox,该控件的外观包含几个部分,一般情况下有一个矩形的外边框,右边有一个向下的箭头用于提示点击之后会有弹出下拉列表。例如: QComboBox::drop-down { image: url(dropdown.png) } 上面的样式指定所有QComboBox的下拉箭头的图片为自定义的图片dropdown.png QComboBox#myQComboBox::drop-down { image: url(dropdown.png) } 指定id名为myQComboBox的QComboBox控件的下拉箭头的自定义图片,要注意的是子控件选择器实际上是选择复合控件中的一部分,也就是说对复合控件中的一部分应用样式,例如为QComboBox的下拉箭头指定图片,而不是为QComboBox本身指定图片。 QSS伪状态QSS的伪状态选择器实际上与CSS中的类似,是以冒号开头的一个选择表达式,例如:hover表示当鼠标经过时候的状态。他限制了当控件在某一种状态下的时候才能应用QSS规则,伪状态只能描述一个控件的状态,或者是一个复合控件中的子控件的状态,所以该伪状态选择器只能放在选择器的最后面,例如: QComboBox:hover{background-color:red;} 该规则表示当鼠标经过QComboBox上面的时候,其背景颜色指定为红色,该伪状态 :hover描述的是QComboBox的状态。 QComboBox::drop-down:hover{background-color:red;} 表示当鼠标经过QComboBox的下拉箭头的时候,该下拉箭头的背景颜色变成红色。 QCheckBox:hover:checked { color: white }
指定一个当鼠标经过一个选中的QCheckBox的时候,设置其文字的前景颜色为白色。 QSS级联与冲突QSS中的级联包含几个方面的概念,一个是当在同一个控件上应用两个不同的规则,那么应该应用哪一个规则的问题,也就是如何解决这种冲突。二个是在一个容器控件上设置的QSS规则会对容器里面的控件产生效果(这要取决于容器控件上设置的QSS规则是什么样的规则,如果容器控件上设置的QSS规则仅仅针对容器控件本身则该规则对子控件没有影响,如果该QSS规则里面有对子控件的设置,则自然会对子控件产生效果),级联问题是解决当一个控件被层层父容器包裹,并且在每一层的父容器上都有对该控件的样式设置的时候,该控件的最终效果是合并这些父容器上的QSS效果。
这两条规则都会应用到名为okButton的按钮上,但是他们为同一个属性设置了不同的颜色,这会有冲突,那么要解决这样的冲突就必须考虑到选择器的特异性(这个词怎么理解,我理解为这个特异性为更加特殊,实际上CSS上用权重表示这里的特异性),显然QPushButton#okButton仅仅针对对象名为okButton的控件有效果,而QPushButton却对所有的QPushButton的实例或者是其子类的实例有效果,显然QPushButton#okButton选择器更加特殊,也就是更具有特异性。所以最终okButton前景色被应用为灰色。如果两条规则的特异性一样,那么就选择放在后面的那一条。
显然QPushButton:hover比单纯的QPushButton更加具有特异性。这两条规则表示当鼠标放在按钮上的时候文字是白色,其他情况下都是红色。
所以默认情况下前景文字是红色的,当鼠标经过的时候并不会变成白色,因为他们的特异性是一样的,所以选择后面的,也就是红色。
当鼠标经过的时候,就变成白色的了,因为他们的特异性一样,所以选择后面的规则,也就是鼠标经过前景变成白色。
那么第一条的特异性比第二条大,所以应用第一条的规则。
而在类的继承结构上,QAbstractButton是QPushButton的父类,显然QPushButton更加具有特异性,所以QPushButton的前景颜色被应用为红色,而不是灰色。有没有一个办法来确定两条QSS规则的特异性大小呢,其实QSS使用的特异性的计算方法与CSS是一样的,详细可以参考CSS2的文档规范,这里还是简要的说明一下,特异性这个东西在CSS中一般被称为权重,权重越大的越优先使用,CSS的计算规则如下:
上面的计算规则是CSS的计算规则,同样可以应用的QSS上。
第一条语句表示在QApplication上设置QPushButton的样式,而第二条语句表示在myPushButton对象上设置样式。最终结果会将myPushButton的前景颜色设置为蓝色。级联效果主要应用在当一个控件的样式在多个容器控件上都有设置的时候,该控件的最终效果是这些所有容器控件上效果的合并。级联规则在CSS中本身也是一个复杂的主题,如果大家感兴趣,还是需要自己参考CSS2的规范文档,本节仅仅是抛装引玉。
该语句仅仅为QFrame设置前景颜色以及边框的效果并不会应用到其里面的QPushButton上,如果是下面的语句则都可以:
QSS实际应用中要注意的地方在使用QSS的时候遇到过一些坑,看似简单,但是如果不知道的话,还是很折磨人的:
设置边框颜色和像素的时候,必须是第一种顺序,而CSS中是无所谓的,至于原因,我也不清楚,就是这么坑人。
Qt开发的程序的案例前面一段时间用Qt开发了一个基于公司平台的视频导出与编辑工具,当作一个案例贴出来吧,还是有很多可以美化的地方,窗体的外框没有做任何美化处理,用QSS做起来其实还是蛮简单的,里面的页面按钮,文本框,分页功能等都用QSS设置过,其实这个软件的界面算是中规中矩的,要做成酷狗,360那种风格用QSS是完全没有问题的: 登录界面,里面用到了Qt提供的正则验证功能,如果输入的ip不符合规则,则根本输入不了,例如如果输入一个非法的字符,则文本框中没有反应 登录进去之后的主界面,一共有7个选项卡,每一个选项卡代表一个功能: 视频导出:导出web平台上的视频数据,包括文件,片头片尾,视频的索引,可以导出电影模式,资源模式,支持断点续传。 视频导出功能,实际上是导出一个课件,该课件可能录制的有电影模式的视频,资源模式的视频,或者都有。功能介绍如下: 视频剪切对视频进行剪切处理: 对视频进行截取: 对资源模式进行后期导播: 创建自定义片头片尾(其实就是傻瓜式的让用户生成自定义图片),里面的文字可以拖动,可以键盘微调,可以修改: 合并片头片尾,将生成好的片头片尾图片,合并到一个mp4的开始和结尾处,可以指定片头片尾的图片文件,并指定在mp4开头或结尾显示的时间: 转码与上传: 程序里面的外观包括,下拉列表,文本输入框,按钮,表格,tab等都是使用QSS设置的。QSS参考了CSS,所有里面有一些属性是与CSS相同的,但并不是所有的CSS属性都能够在QSS中使用,也并不是所有的Qt控件都支持CSS的盒模型,Qt帮助中关于QSS的部分详细描述了可用的QSS属性列表,以及控件列表,伪状态列表,子控件列表,QSS中可用的图标列表,以及QSS属性值的单位列表,限于篇幅不可能将所有这些都详细列出来,其实在安装QtCreator之后的帮助文档中有详细的描述,其列表类似下面的图(描述了部分伪状态的说明): |
|