QT样式表

除了子类化Style类，使用QT样式表（QStyleSheet）是另一种快速改变QT程序UI风格的方法，它很大程度上借鉴和参考了HTML层叠样式表的语法和思想。其效果叠加在Style的基础上

按官方文档的说法，QT样式表目前只能和内置Style配合工作，和子类化的Style的配合正在开发中

StyleSheet的使用
StyleSheet文件的默认后缀名为qss，可以通过命令行参数 -stylesheet filename.qss 来设置样式表，也可以通过QApplication::setStyleSheet 或 QWidget::setStyleSheet来设置应用程序或特定控件要使用的样式表

::setStyleSheet函数的参数是字符串（不是qss文件的名字，而是样式表的内容），所以直接使用的话，不方便一次设置大量的规则，但是可以使用资源文件将qss样式表嵌入到程序中，然后通过QApplication::setStyleSheet来使用，例如：

view plaincopy to clipboardprint?
QFile file(":/qss/mystylesheet.qss");  
file.open(QFile::ReadOnly);  
app.setStyleSheet(file.readAll()); 
QFile file(":/qss/mystylesheet.qss");
file.open(QFile::ReadOnly);
app.setStyleSheet(file.readAll());
 

样式表语法
这里不打算详细解释，只是举例说明，具体的语法规则，请参考 http://qt.nokia.com/doc/4.6/stylesheet-syntax.html

一条样式表的描述规则可能类似这样：

view plaincopy to clipboardprint?
QComboBox#myComboBox::down-arrow:pressed {  
    position: relative;  
    top: 1px; left: 1px;  
} 
QComboBox#myComboBox::down-arrow:pressed {
    position: relative;
    top: 1px; left: 1px;
}
 

一条样式表规则由选择器 (Selector)和属性定义(declaration)组成。

view plaincopy to clipboardprint?
QComboBox#myComboBox::down-arrow:pressed 
QComboBox#myComboBox::down-arrow:pressed

这部分是选择器，用于指定样式表规则的应用对象，细分开来：

QComboBox#myComboBox 这一部分叫类型选择器(Type Selector)，QComboBox指定了对象类名，#name指定对象的实例名（非必须）其它的选择器语法请参考官方文档。
down-arrow 子控件描述符(subcontrol)，和前面的字段用::隔开，这里表示组合框的下拉按键
pressed 伪状态(Pseudo-States)描述符，和前面的字段用:隔开，这里表示压下状态
以上除了第一个字段，都不是必须，而是进一步限制规则适用范围

view plaincopy to clipboardprint?
{  
    position: relative;  
    top: 1px; left: 1px;  
} 
{
    position: relative;
    top: 1px; left: 1px;
}
 

这部分是属性定义，由成对的属性名:属性值组成，用;分隔。

 

 

 

 

1， QSS语法

同css一样，他也有由一个selector与一个declaration组成，selector指定了是对哪一个控件产生效果，而declaration才是真正的产生作用的语句。如：
QPushButton { color: red }

QPushButton指定了是对所有的QPushButton或是其子类控件（如用户定义的MyPushButton）产生影响，而color:red表明所有的受影响控件的前景色都为red。

除了"类名"，"对象名"，"Qt属性名"这三样东西是大小写敏感的外其他的东西都是大小写不敏感的，如color与Color代表同一属性。

如果有几个selector指定了相同的declaration, 可以使用逗号（,）将各个选择器分开，如：
QPushButton, QLineEdit, QComboBox { color: red }

他相当于：
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

declaration部份是一系列的（属性：值）对，使用分号（;）将各个不同的属性值对分开，使用大括号（{}）将所有declaration包含在一起。

1， 一般选择器（selector）

Qt支持所有的CSS2定义的选择器，其祥细内容可以在w3c的网站上查找http://www.w3.org/TR/CSS2/selector.html ， 其中比较常用的selector类型有：

i. 通用类型选择器：*

会对所有控件有效果。

ii. 类型选择器：QPushButton

匹配所有QPushButton的实例和其子类的实例。

iii. 属性选择器：QPushButton[flat="false"]

匹配所有QPushButton属性flat为false的实例，属性分为两种，静态的和动态的，静态属性可以通过Q_PROPERTY() 来指定，来动态属性可以使用setProperty来指定，如：
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);

如果在设置了qss后Qt属性改变了，需要重新设置qss来使其生效，可以使用先unset再set qss。

iv. 类选择器：.QPushButton

匹配所有QPushButton的实例，但不包含其子类，这相当于：

*[class~="QPushButton"]

~=的意思是测试一个QStringList类型的属性是否包含给定的QString。

v. ID选择器：QPushButton#okButton

对应Qt里面的object name设置，使用这条CSS之前要先设置对应控件的object name为okButton，如：

Ok->setObjectName(tr("okButton"));

vi. 后裔选择器：QDialog QPushButton

匹配所有为QDialog后裔（包含儿子，与儿子的儿子的递归）为QPushButton的实例

vii. 子选择器：QDialog > QPushButton

匹配所有的QDialog直接子类QPushButton的实例，不包含儿子的儿子的递归。

2， 子控件选择器

i. 对于复杂的控件，可能会在其中包含其他子控件，如一个QComboxBox中有一个drop-down的按钮。那么现在如果要设置QComboxBox的下拉按钮的话，就可以这样访问：
QComboBox::drop-down { image: url(dropdown.png) }

其标志是（::）

ii. 子控件选择器是用位置的引用来代表一个元素，这个元素可以是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin属性可以改变子控件的默认放置位置，如：
QComboBox {
margin-right: 20px;
}
QComboBox::drop-down {
subcontrol-origin: margin;
}

如上语句可以用来改变drop-down的margin。

iii. 相对位置属性可以用来改变子控件相对于最初位置的偏移量，如当一个QCombox的drop-down按钮被按下时，我们可以用一个内部的小偏移量来表示被按下的效果，如下：
QComboBox::down-arrow {
image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
position: relative;
top: 1px; left: 1px;
}

iv. 绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了，这些子控件就可以被当成一般的widget来对待，并且可以使用合模型。关于合模型可以参考下面。

如果你要查看Qt支持哪些子控件选择器，可以参考：

http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls

-syntax.html

3， 伪选择器（pseudo-states）

i. 伪选择器以冒号（:）表示，与css里的伪选择器相似，是基于控件的一些基本状态来限定程序的规则，如hover规则表示鼠标经过控件时的状态，而press表示按下按钮时的状态。如：

QPushButton:hover {

Background-color:red;

}

表示鼠标经过时QPushButton背景变红。

ii. Pseudo还支持否定符号（！），如：
QRadioButton:!hover { color: red }

表示没有鼠标移上QRadioButton时他显示的颜色是red。

iii. Pseudo可以被串连在一起，比如：
QPushButton:hover:!pressed { color: blue; }

表示QPushButton在鼠标移上却没有点击时显示blue字，但如果点击的时候就不会显示blue颜色了。

iv. 同样可以和之前所讲的子控件选择器一起联合使用，如：

QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }

v. 与前面所讲的一样，伪选择器，子控件选择器等都是可以用逗号（，）分隔表示连续相同的设置的，如：

QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下

vi. 更多请参考：

http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

使用Qt Style Sheet(2)
2009-10-30 16:51

2， 解决冲突

a) 使用object name

i. 在程序里面要先设置控件的，如：

btnOne = new QPushButton(centralWidget);

btnOne->setObjectName(QString::fromUtf8("btnOneCh"));

ii. 这样，我们有了一个object name为btnOneCh的QPushButton，试验一下，使用指定object name的方式，如：

QPushButton#btnOneCh { color: red }

QPushButton { color: white }

可以看出，btnOncCh的color变成了red

b) 使用伪选择器，如hover，press，enabled等，如：

i. 按扭"1"是disable了的，

QPushButton:!enabled {color: white}

c) 所有的类型选择器都有一个共同的特性，就是如果有两个属性冲突了的话就会以最后出现的一个为准，如：

QPushButton { color: red }

QAbstractButton { color: gray }

由于QPushButton为QAbstractButton的子类，如果只设置QAbstractButton的可以想像结果是所有的QPushButton都为gray, 如果只设置QPushButton的所有QPushButton都会为red，当两个都能设置起效的时候，以在文本上最后出现的为准，所以结果为Grey

d) 当然其中如果有#指定了object name，他所设置的优先级是最大的，具体规则可以参考：http://www.w3.org/TR/CSS2/cascade.html#specificity，或是

http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution

QPushButton#btnOneCh { color: red }

QPushButton { color: blue }

QAbstractButton { color: gray }

虽然QAbstractButton在最后，但是之前有#btnOneCh指定了QPushButton"一"的color为red所以最后显示也是"一"为red。

3， 级联效应

a) 子类可以继承父类的StyleSheet，但是如果子类里面设置了StyleSheet与父类里在设置的有冲突，那么当然会优先考虑子类自己的，同样，如果在qApp时面设置了，但是在某一个特定控件里面也设置，如果有冲突，也是优先控件自己的，例如，我在程序时面设置了：

btnOneEn->setStyleSheet("QPushButton { color: red }");

而，当我再设置qApp时，如果，将QPushButton的color设置成grey的，那么结果是对于btnOneEn这个QPushButton来说他的颜色还是red。

这就是为什么这里设置为grey了btnOneEn却还是red的。

b) 如果我们对一个控件设置StyleSheet为：
QPushButton* myPushButton;
myPushButton->setStyleSheet("* { color: blue }");

其实他和设置为：
myPushButton->setStyleSheet("color: blue");
效果相同，只是后一种设置不会对QPushButton的子类产生作用，但第一种却会。

4， 继承性

a) 与CSS不同的一点，在CSS box模型中，如果一个元素在别一元素的里面，那么里面的元素会自动继承外面元素的属性，但QSS里面不会，如：

一个QPushButton如果放在一个QGroupBox里面，如果：
qApp->setStyleSheet("QGroupBox { color: red; } ");

并不代表在QGroupBox里面的QPushButton也会有color:red的属性，如果要想有的话要显示写明，如：
qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

或者在应用程序里面也可以用QWidget::setFont等来设置到子控件的属性。

5， Namespace冲突

a) 类型选择器能够使用到一个特定的类型，如：
class MyPushButton : public QPushButton {
// ...
}
qApp->setStyleSheet("MyPushButton { background: yellow; }");

因为QSS使用QObject::className来判断要赋与style sheet的控件类型，如果一个用户定义控件类型在一个namespace里面的话，QObject::className会返回<namespace>::<classname> 的名字，这和子控件选择器的语法相冲突，为了解决此问题，使用"--"来代替"::"，比如：
namespace ns {
class MyPushButton : public QPushButton {
// ...
}
}
qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");

6， 设置对像属性

a) 如果在程序里面使用Q_PROPERTY设置的属性，可以在qss里面使用：qproperty-<property name>的形式来访问并设置值。如：
MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }

如果属性引用到的是一个由Q_ENUMS申明的enum 时，要引用其属性名字要用定义的名称而不是数字。

 

 

 

 

样式表规则的范围和优先级关系
因为样式表规则的层级关系比较复杂，另外设置的方式也有很多，有时候会发生多条规则都和某一个具体控件相关的情况，这样具体哪一条样式表规则最终被应用到控件的UI表现上，就需要有一个规则来定义，大致上牵涉到这个问题的情况有如下几种

规则冲突

多条规则制定了不同的内容，可能的情况有很多，比如

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

这种情况，其实可以不算冲突，更加具体的类型描述符定义的规则拥有更高优先级，所以一个有鼠标悬停的按钮的文本颜色就是白色的，否则为红色

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

这里就可能发生规则冲突，当一个使能的按钮有鼠标悬停的时候，颜色的定义是什么呢？ QStyleSheet的判断原则是，后面规则的优先级高于前面的规则，所以这种情况颜色为红色

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

这个相对难发现，一个基类及其子类都定义了针对文本颜色的规则，那么子类应用哪一条规则呢？你可能会认为自然是子类用自己的规则了，很可惜不是，样式表不考虑类的继承层级优先关系，所以还是后一条规则优先级高于前一条规则。如果确实要单独设定子类的规则，需要交换规则的顺序。

样式表层叠 Cascading

因为样式表可以应用在QApplication上，也可以单独应用在控件上，所以最终应用到一个具体控件的样式表，是通过叠加合并所有的父控件乃至应用程序的样式表设定来得到的。这种情况下，也有可能发生规则冲突, 例如：

view plaincopy to clipboardprint?
qApp->setStyleSheet("QPushButton { color: white }");  
myPushButton->setStyleSheet("* { color: blue }"); 
qApp->setStyleSheet("QPushButton { color: white }");
myPushButton->setStyleSheet("* { color: blue }");

这种情况下，控件自身的样式表的优先级高于父控件或应用程序的样式表

样式表继承 Inheritance

在标准的CSS样式表中，一个控件的字体和颜色属性如果没有明确设定，那么将自动继承自父控件，而在QT的样式表中，不会自动继承，例如：

qApp->setStyleSheet("QGroupBox { color: red; } ");

这种情况下，对于GroupBox中的添加的子控件，不会自动设置其颜色属性，如果要设置子控件的属性，需要明确设定：

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

注意，这里的继承和上面的层叠不一样，层叠指不同样式表设置同一个对象，继承指的则是样式表规则中选择器对控件层级关系的影响

Stylesheet是如何附加在Style上的
当设置StyleSheet的时候，一个QStyleSheetStyle会被生成并被设为应用程序实际的Style，而当前的Style则被reparent成QStyleSheetStyle的子对象，当应用程序或控件调用Style绘图的时候，实际调用的是QStyleSheetStyle对象，在QStyleSheetStyle类内部，会先调用函数按照StyleSheet定义的规则绘制UI，如果没有相关规则，再调用当前的Style对象的绘图函数绘制UI，所以QStyleSheet作为一个代理Style先对UI进行处理。