Qt之QSS（样式表语法）

Qt样式表以下统称QSS的术语和语法规则几乎和CSS相同。如果你熟悉CSS可以快速浏览以下内容。

QSS包含了一个样式规则序列一个样式规则由一个选择器和声明组成选择器指定哪些部件由规则影响声明指定哪些属性应该在部件上进行设置。例如

上面的例子中QPushButton是选择器{ color: red }是声明该规则指定QPushButton及其子类例如MyPushButton应使用红色作为前景色。

QSS通常不区分大小写即color、Color、COLOR、cOloR指同一属性唯一例外就是类名class names、对象名object names、属性名property names区分大小写。

几个选择器可以指定相同的声明使用逗号,来分隔选择器。例如

目前为止所有的示例使用选择器中最简单的类型类型选择器。QSS支持所有的selectors defined in CSS2。下表总结了最有用的类型选择器。

QPushButton[flat=”false”] 匹配QPushButton中flat属性为false的实例。可以用此选择器来测试任何支持QVariant::toString()的属性此外支持特殊的类属性、类名称。此选择器也可以用来测试动态属性参考助手Qt Style Sheets Examples中Customizing Using Dynamic Properties部分。还可以使用~=替换=测试QStringList类型的属性是否包含给定的QString。 警告如果Qt属性值在设置样式之后更改那么可能需要强制重新计算样式。实现的一个方法是取消样式然后重新设置一遍。

对于样式复杂的部件需要访问子控件例如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可能包含子控件使得可以限制特有部件子控件的应用规则。例如

上述规则指定了QComboBoxe下拉按钮样式虽然双冒号::语法让人想起CSS3伪元素但Qt子控件从概念上讲有不同的级联语义。

子控件定位总是相对于另一个参考元素。这个参考元素可能是小部件或其它子控件。例如QComboBox的::drop-down放置默认的放置在QComboBox区域的右上角::drop-down放置默认的在::drop-down子控件的中央参考助手Qt Style Sheets Reference中List of Stylable Widgets部分。

可以使用subcontrol-origin改变子控件原始的默认位置

width和height属性可用于控制子控件的大小注意设置一个图片会隐式地设置子控件的大小。

相对定位position : relative可以改变子控件相对初始位置的偏移量。例如按下QComboBox下拉按钮时我们可能更喜欢用内部箭头偏移量来产生一个被按下的效果。要做到这一点我们可以指定

绝对定位position : absolute允许子控件改变位置和的大小而不受参考元素限制。一旦位置被设定这些子控件将被和普通部件widgets视为相同并且可以使用盒模型样式参考助手Customizing Qt Widgets Using Style Sheets中The Box Model部分。

参考助手Qt Style Sheets Reference中List of Sub-Controls部分及Qt Style Sheets Examples中Customizing the QPushButtons Menu Indicator Sub-Control部分。

注意对于复杂的部件如QComboBox和QScrollBar如果一个属性或子控件被定制所有其它属性或子控件必须被定制好。

选择器可以包含伪状态意味着限制基于部件状态的应用程序规则。伪状态出现在选择器后面用冒号:关联。例如鼠标划过按钮

伪状态可以连接使用这种情况下相当于隐含了一个逻辑与。例如当鼠标滑过选中的QCheckBox

两个规则匹配objectName为okButton的QPushButton实例color属性有冲突。要解决这个冲突必须考虑到的选择器的特殊性。上面的例子QPushButtonokButton被认为比QPushButton更具体因为它通常是指单个对象而不是一类的所有实例。

同样的利用伪状态比不指定伪状态那些选择器更具体。因此下面的样式指定一个QPushButton应该有鼠标悬停文本白色否则文本红色效果

这里两个选择器有相同的特殊性如果鼠标在按钮上时第二条规则优先。如果在这种情况下我们想要白色文本需要重新排序规则

QPushButton:hover:enabled { color: white }

QPushButton:enabled { color: red }

类似的问题出现在类型选择器一起使用。请看下面的例子

两个规则应用于QPushButton实例因为QPushButton继承自QAbstractButton并有color属性的冲突。因为QPushButton继承QAbstractButton所以QPushButton比QAbstractButton更具体。

然而对于QSS的计算所有的类型选择具有相同的特殊性最后出现的规则优先。换句话说所有的QAbstractButton颜色设置为灰色包括QPushButton。如果需要设置QPushButtons为红色文字我们总能重新排序规则。

为了确定一个规则的特殊性QSS遵循CSS2规范

一个选择器的特殊性的计算方法如下

UL LI {} /* a=0 b=0 c=2 - specificity = 2 */ UL OL+LI {} /* a=0 b=0 c=3 - specificity = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 - specificity = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 - specificity = 13 */ LI.red.level {} /* a=0 b=2 c=1 - specificity = 21 */ #x34y {} /* a=1 b=0 c=0 - specificity = 100 */

QSS可以在QApplication、父部件、子部件中设置。任意部件的有效样式表通过合并部件的祖先父亲祖父等以及任何QApplication上设置的样式表。

冲突发生时不论冲突规则的特殊性部件自身的样式表总优先于任何继承样式表。同样父窗口部件样式表优先于祖父等。

这样一个部件设置样式自动使得它比在祖先部件或QApplication的样式表中指定的其它规则的优先级高。考虑下面的例子。首先我们在QApplication中设置样式表

QPushButton样式表强制QPushButton以及任何子部件显示蓝色文字尽管应用程序范围内的样式表提供的规则更具体。

如果按照下面这种方式写其结果是相同的

在经典的CSS中当字体和颜色没有明确设置时它就会自动从父继承。当使用QSS时部件不会自动从父继承字体和颜色。

例如一个QGroupBox中包含QPushButton

QPushButton没有一个明确的颜色设置因此不是继承其父QGroupBox的颜色而是显示系统的颜色。如果要建立一个QGroupBox及其孩子的颜色可以这样写

相比之下可以用QWidget::setFont() 和 QWidget::setPalette()为子部件设置字体和画板 。

QSS使用部件的QObject::className()来确定何时应用类型选择器。当自定义的部件在命名空间中时QObject::className()返回 namespace :: classname 。这与子控件的语法冲突。为了解决这个问题当命名空间内的部件使用类型选择器时必须更换”::” 为 “–”。 例如

从4.3及以后任何可被识别的Q_PROPERTY都可以使用qproperty- property name 语法设置。

例如

MyLabel { qproperty-pixmap: url(pixmap.png); }

MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }

QPushButton { qproperty-iconSize: 20px 20px; }

如果属性引用Q_ENUMS声明的枚举则应该参考其常量的名字而不是数值。

初学Qt不会样式表怎么办，打包好的Qt样式表一键生成送给你。 很多人应该和我一样，想做界面才接触的Qt，结果就是做不出来华丽的界面，想给控件上个色？不会，百度半天，好不容易给控件添加了背景色，下一个控件又不会了，别急，这次福利来了，我将平时用到的样式表做了一个总结，并做了一个一键生成，调节数据就可以实时显示，里面包括了Label，LineEdit，PushButton，CheckBox，RadioButton，ScrollBar，Slider，Progressbar，Tabwidget，ToolBox，TabWidget控件的自定义。代码很简单，就是重复写槽函数，但其对于新手的学习很有帮助，避免了盲目，大量的通过百度数据拼接样式表。一来方便学习，所以参数
Qt Style Sheets(qt样式表) 我认为qt样式表对于专注于ui交互的人，其在qt的地位不亚于信号与槽的地位。通过qt样式表可以展示绝大部分你可以想象得到的风格。