QT: 样式表(stylesheet)

QT: Style Sheet

QT 样式表的使用可以很方便定制化自己的界面风格。它的使用方法很类似于HTML中的样式表(CSS)。

样式表是一些列的格式规则组成。一条格式规则由一个选择器(selector)和一个声明组成: 其中选择器指定了对哪些控件起作用;声明语句指定了哪些属性进行了定制化。下述示例中QPushbutton是选择器, 花括号中的语句是声明,它是由一些键值对组成,各个键值对之间利用分号分割 。注意 样式表对大小写不敏感。同样地, 在一个声明语句前可以同时存在多个选择器, 各个选择器之间通过逗号风格就可以了。

QPushButton { color: red}

选择器类型

一些列举了一些常用的类型选择器。具体可以参考此处。

选择器 示例 说明
通用选择器 * 匹配所有的空间
类型选择器 QPushButton 匹配所有的QPushButton类及其子类的实例
属性选择器 QPushButton[flat=“false”] 匹配所有QPushButton属性flat为false的实例
类选择器 .QPushButton 匹配所有的QPushButton类的实例
ID选择器 QPushButton#okButton 匹配所有的object name为okButton的QPushButton实例
派生选择器 QDialog QPushButton 匹配所有的QDialog的子(/孙)控件中的QPushButton
子选择器 QDialog>QPushButton 匹配所有的QDialog子控件中的QPushButton

子控件

对于一个复杂的控件, 为了对其样式进行定制就有必要能够访问其子控件, 比如下拉框的下拉按钮等。在选择器的后面添加子控件选项, 就可以对控件中的子控件进行定制化。示例如下:

QComboBox::drop-down{ image: url(dropdown.png)}

子控件的放置位置永远是相对于一个参考控件(父控件)的, 这个父控件也可以是另外一个子控件。例如QComboBox的::drop-down 默认是放置在QComboBox的padding 矩形的右上角位置, 而::drop-down子控件的::drop-down 是默认放置在content 矩形的中心位置。这个放置位置可以通过 subcontrol-origin属性来设置。例如:

QComboBox {  margin-right: 20px;}
QComboBox::drop-down { subcontrol-origin: margin}

同时, 子控件的位置可以设置为相对位置 (与初始化的位置相比较)。而绝对位置的变化是相对于参考控件来进行改变。

QComboBox::down-arrow { image: url(down_arrow.png);}
QComboBox::down-arrow:pressed { position: relative;top: 1px; left: 1px;}

一旦子控件的位置进行了确定,那么它就可以利用 box model 的相关属性来进行定制化。子控件的变化会引起其他所有的子控件做出相应的变化,因此定制化一个子控件意味着对所有的自控件做出了改变。更多子控件列表可以参考此处。

###伪态
选择器可以根据应用的状态包含伪装态以做出不同的变化。伪态常常出现在选择器的最后,用冒号进行分隔。甚至伪态可以非、与、或。更多伪态列表可以参考此处。

QPushButton:hover { color: white }
QRadioButton:!hover { color: red }
QCheckBox:hover:checked { color: white }
QPushButton:hover:!pressed { color: blue; }
QCheckBox:hover, QCheckBox:checked { color: white }
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

冲突解决方案

依据指定的规则对某个属性进行配置时,多个命令对同一属性进行了赋值就会导致冲突发生。Qt样式表对这种冲突的解决方案是选择执行更为"特殊"的规则, 也就是说选择定义更为详细的规则进行。

QPushButton#okButton { color: gray }
QPushButton { color: red }

当存在两个同等"层次"的规则时,后置的规则会覆盖掉前一个规则。这种冲突可以通过"与"操作来获得我们想要的结果。

QPushButton:hover { color: white }
QPushButton:enabled { color: red }

当类型选择器之间存在继承关系时,并不会选择子类的设定,因为所有的类型选择器是‘同级’的。具体的"特异性"可以参照CSS2

QPushButton { color: red }
QAbstractButton { color: gray }

级联

样式表可以直接设置在应用、父控件、子控件上。一个空间的属性继承与父控件并于自生的样式进行合并。当发生冲突时, 会以自身的设定为基准,这一点与样式表中的冲突规则时不相同的。

继承

在经典的CSS中,字体和颜色通常会自动的继承与父类。默认地,在QT样式表中,一个控件并不会自动的从父控件中继承字体和颜色设置。但是通过Qt中的函数 QWidget.setFont()或者QWidget.setPalette函数设定的字体和颜色值会自动传播至其子控件。

Reference
[1] The Style Sheet Syntax

你可能感兴趣的:(Qt)