自学QT之QSS皮肤美化教程-变化吧

2020年1月27日23:08:53美化教程评论阅读模式

借鉴css的灵感， Qt也声援Qt自己的css,
简称qss。同css相仿，qss的首要性能与最目标都是能使界面的体现与界面的元素分手，即质与形的分开，就好像一一己可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分别的软件成为也许，利用过程也能像web界面那样随便地变换外表。
1,模式化方式，
QSS语法
同css一样，他也有由一个selector与一个declaration形成，selector指定了是对哪一个控件发生后果，而declaration才是真实的发生作用的语句。如：
QPushButton { color: red }
QPushButton指定了是对所有的QPushButton或是其子类控件（如用户定义的MyPushButton）发生波及，而color:red阐明所有的受波及控件的前景致都为red。
除非“类名”，“对象名”，“Qt属性名”这三样东西是大小写敏感的外其余的东西都是大小写不敏感的，如color与Color代表统一属性。
万一有几个selector指定了相像的declaration, 能够运用逗号（,各种绽放准绳驱动着ATM技巧不停变动,）将各个抉择器分离，如：
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

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时，如果,typedef的四种用法和两种陷阱，将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 时，要引用其属性名字要用定义的名目而不是数字。