Qt样式表总结

QSS样式表学习总结

一、什么是QSS

QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

摘要

由于Qt样式表的引入，定制Qt部件的外观样式变得非常简单。 无论你是想仅仅修改一个现有部件的外观，还是想从零开始设计一套全新的界面风格，现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类。

1. 何为Qt样式表

QSS称为Qt StyleSheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。通过调用QWidget::setStyleSheet()或QApplication::setStyleSheet()，你可以为一个独立的子部件、整个窗口，甚至是整个个应用程序指定一个样式表。样式表是通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。 这个特殊的子类实际上是其他的系统特定风格类的包裹类， 它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。

1.1方箱模型

在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：空白(margin)、边框(border)、填充(padding)和内容(content)。对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。填充在边框和内容区域之间提供了空白间隔。

Qt 包含了一个叫做stylesheet的例子来帮助你学习样式表， 这个例子自带了两个样式：Coffee和Pagefold。

2. QSS的语法规则

Qt样式表与CSS的语法规则几乎完全相同，如果你已经了解了CSS，完全可以跳过本节。
一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式：

selector { attribute: value }

选择器(selector)部分通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。
属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。

为了使用方便，我们还可以使用一种简化形式：

selector1, selector2, ..., selectorM {
    attribute1: value1;
    attribute2: value2;
    ...
    attributeN: valueN; }

这种简化形式可以同时为与M个选择器相匹配的部件设置N种属性。例如：

QPushButton, QLineEdit, QComboBox { color: red }

等价于

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

这个规则设置了所有的QPushButton, QLineEdit, QComboBox的前景色。
QSS的语法规则几乎与CSS相同。一条QSS的样式是由两部分组成的，一部分是选择器指定了哪些控件会受到影响，另一部分是指定了属性的值，表示这些控件的哪些属性会受到影响。例如：

QPushButton { color: red }

QPushButton表示选择器，指定了所有的QPushButton或者是QPushButton的子类会受到影响，注意凡是继承自QPushButton的子类也会受到影响，这是与CSS中不同的地方，因为CSS应用的都是一些标签，没有类的层次结构，更加没有子类的概念。而后面的{color:red}则是规则的定义，表明指定前景颜色是红色。整个意思就是设置QPushButton类以及其子类的所有实例的前景色是红色。

如果MyButton继承自QPushButton，那么上面的规则也会应用到所有MyButton控件上，但是如果规则是如下的：

MyButton{color:red} 

则只会对MyButton的实例应用红色的前景颜色，而对QPushButton的实例没有应用。

2.1 QSS的选择器类型

1. 通配选择器：* ; 匹配所有的控件
2. 类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
3. 属性选择器：QPushButton[flat=“false”]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
4. 类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号
5. ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值
6. 后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
7. 子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

另外上面所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，这点与CSS一样，例如#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。#mytable QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

2.2 QSS子控件

QSS的子控件实际上也是选择器的一种，因为这种选择器与CSS有一些不同，所以单独拿出来说，QSS的子控件选择器是应用在一些复合控件上的，典型的例如QComboBox，该控件的外观包含几个部分，一般情况下有一个矩形的外边框，右边有一个向下的箭头用于提示点击之后会有弹出下拉列表。例如：

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

上面的样式指定所有QComboBox的下拉箭头的图片为自定义的图片dropdown.png
::dropdown子控件选择器也可以与上面提到的选择器一起联合使用：

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

指定id名为myQComboBox的QComboBox控件的下拉箭头的自定义图片，要注意的是子控件选择器实际上是选择复合控件中的一部分，也就是说对复合控件中的一部分应用样式，例如为QComboBox的下拉箭头指定图片，而不是为QComboBox本身指定图片。

2.3 QSS伪状态

QSS的伪状态选择器实际上与CSS中的类似，是以冒号开头的一个选择表达式，例如:hover表示当鼠标经过时候的状态。他限制了当控件在某一种状态下的时候才能应用QSS规则，伪状态只能描述一个控件的状态，或者是一个复合控件中的子控件的状态，所以该伪状态选择器只能放在选择器的最后面，例如：

QComboBox:hover{background-color:red;}

该规则表示当鼠标经过QComboBox上面的时候，其背景颜色指定为红色，该伪状态 :hover描述的是QComboBox的状态。
伪状态除了描述选择器选择的控件以外，还可以描述子控件选择器所选择的复合控件中的子控件的状态，例如：

QComboBox::drop-down:hover{background-color:red;}

表示当鼠标经过QComboBox的下拉箭头的时候，该下拉箭头的背景颜色变成红色。
此外伪状态可以用一个感叹号表示否，例如:hover表示鼠标经过，而:!hover表示鼠标没有经过的状态。几个伪状态可以同时一起使用，例如：

QCheckBox:hover:checked { color: white }

指定一个当鼠标经过一个选中的QCheckBox的时候，设置其文字的前景颜色为白色。
QSS提供了很多的伪状态，一些伪状态只能用在特定的控件上，具体有哪些伪状态，在Qt的帮助里面有详细的列表，限于篇幅这里也不列出了。

这里是引用

2.4 QSS级联与冲突

QSS中的级联包含几个方面的概念，一个是当在同一个控件上应用两个不同的规则，那么应该应用哪一个规则的问题，也就是如何解决这种冲突。二个是在一个容器控件上设置的QSS规则会对容器里面的控件产生效果(这要取决于容器控件上设置的QSS规则是什么样的规则，如果容器控件上设置的QSS规则仅仅针对容器控件本身则该规则对子控件没有影响，如果该QSS规则里面有对子控件的设置，则自然会对子控件产生效果)，级联问题是解决当一个控件被层层父容器包裹，并且在每一层的父容器上都有对该控件的样式设置的时候，该控件的最终效果是合并这些父容器上的QSS效果。

（1）冲突问题：

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

这两条规则都会应用到名为okButton的按钮上，但是他们为同一个属性设置了不同的颜色，这会有冲突，那么要解决这样的冲突就必须考虑到选择器的特异性(这个词怎么理解，我理解为这个特异性为更加特殊，实际上CSS上用权重表示这里的特异性)，显然QPushButton#okButton仅仅针对对象名为okButton的控件有效果，而QPushButton却对所有的QPushButton的实例或者是其子类的实例有效果，显然QPushButton#okButton选择器更加特殊，也就是更具有特异性。所以最终okButton前景色被应用为灰色。如果两条规则的特异性一样，那么就选择放在后面的那一条。

（2）另外如果一个选择器应用了伪状态，而另一个没有，那么应用了伪状态的选择器要更加特殊，例如：

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

显然QPushButton:hover比单纯的QPushButton更加具有特异性。这两条规则表示当鼠标放在按钮上的时候文字是白色，其他情况下都是红色。
（3）如下面两个规则的特异性是一样的，那么应该是如何应用呢：

QPushButton:hover { color: white }  //如果鼠标经过则前景白色
QPushButton:enabled { color: red }  //如果按钮是enabled状态则前景红色

所以默认情况下前景文字是红色的，当鼠标经过的时候并不会变成白色，因为他们的特异性是一样的，所以选择后面的，也就是红色。
（4）那么换一下顺序会怎样呢：

QPushButton:enabled { color: red }  //如果按钮是enabled状态则前景红色
QPushButton:hover { color: white }  //如果鼠标经过则前景白色

当鼠标经过的时候，就变成白色的了，因为他们的特异性一样，所以选择后面的规则，也就是鼠标经过前景变成白色。
（5）如果把其中的一条的特异性增加，例如：

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

那么第一条的特异性比第二条大，所以应用第一条的规则。
（5）另外一种特异性发生在类型选择器上：

QPushButton { color: red }   //应用在所有的QPushButton上
QAbstractButton { color: gray } //应用在所有的QAbstractButton上

而在类的继承结构上，QAbstractButton是QPushButton的父类，显然QPushButton更加具有特异性，所以QPushButton的前景颜色被应用为红色，而不是灰色。有没有一个办法来确定两条QSS规则的特异性大小呢，其实QSS使用的特异性的计算方法与CSS是一样的，详细可以参考CSS2的文档规范，这里还是简要的说明一下，特异性这个东西在CSS中一般被称为权重，权重越大的越优先使用，CSS的计算规则如下：

1. 计算一条规则中id选择器的个数，假设存放在变量a中
2. 计算一条规则中类选择器和属性选择器的个数，存放在变量b中
3. 计算一条规则中的类型选择器的个数，存放在变量c中
4. 忽略伪元素，对应QSS中的子控件

下面是具体的计算方法：

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
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 */

上面的计算规则是CSS的计算规则，同样可以应用的QSS上。

关于级联：

QSS可以设置在QApplication上，也可以设置在一个部件的容器部件上，也可以设置在子孙部件上，一个部件最终使用的样式效果是合并了他的所有父容器，祖父容器等上面设置的所有样式的结果，这些设置会进行叠加。如果在级联过程中发生了冲突，例如部件本身指定的前景颜色为绿色，而其父亲容器为其指定的前景颜色为红色，此时就选择部件本身设置的样式效果。例如：

qApplication->setStyleSheet("QPushButton { color: white }");
myPushButton->setStyleSheet("* { color: blue }");

第一条语句表示在QApplication上设置QPushButton的样式，而第二条语句表示在myPushButton对象上设置样式。最终结果会将myPushButton的前景颜色设置为蓝色。级联效果主要应用在当一个控件的样式在多个容器控件上都有设置的时候，该控件的最终效果是这些所有容器控件上效果的合并。级联规则在CSS中本身也是一个复杂的主题，如果大家感兴趣，还是需要自己参考CSS2的规范文档，本节仅仅是抛装引玉。
另外一个要提到的是，QSS中似乎为父容器控件本身设置的样式，并不会被子控件继承，例如如果QFrame中有一个QPushButton控件，那么如下的语句：

ui->frame->setStyleSheet("QFrame{ color: red; border:1px solid red }");

该语句仅仅为QFrame设置前景颜色以及边框的效果并不会应用到其里面的QPushButton上，如果是下面的语句则都可以：

ui->frame->setStyleSheet("QPushButton{ color: red; border:1px solid red }");
ui->frame->setStyleSheet("*{ color: red; border:1px solid red }");

4. 前景与背景

部件的前景色用于绘制上面的文本，可以通过color属性指定。背景色用于绘制部件的填充矩形，可以通过background-color属性指定。

背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容）。背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。

如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

该例子中使用的样式表如下所示：

QFrame {
    margin: 10px;
    border: 2px solid green;
    padding: 20px;

    background-color: gray;
    background-image: url(qt.png);
    background-position: top right;
    background-origin: content;
    background-repeat: none;
}

在这个例子中，QFrame四周的空白、边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：

QFrame {
    margin: 14px 18px 20px 18px;
}

同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。

QFrame {
    margin-top: 14px;
    margin-right: 18px;
    margin-bottom: 20px;
    margin-left: 18px;
}

虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

5. 创建可缩放样式

background-image属性指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。
border-image属性边框图片拉伸，它同时提供了部件的背景和边框。图像随组件变化而被拉伸或平铺以填充可用空间。

例如，下面的样式表定义了上图中的button：

QPushButton {
    border-width: 4px;
    border-image: url(button.png) 4 4 4 4 stretch stretch;
}

另外，“边框图片”还应该含有alpha通道，以使背景能够在边角处露出来。

6. 控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint()，并在布局时被考虑。

例如：

QPushButton {
    min-width: 68px;
    min-height: 28px;
}

如果该属性没有被指定，最小大小将从部件的内容区域和当前样式中继承。

7. 处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。例如，如果我们想在一个push button在被按下的时候具有sunken的外观，我们可以指定一个叫做 :pressed 的伪状态。

QPushButton {
    border: 2px outset green;
    background: gray;
}

QPushButton:pressed {
    border-style: inset;
}

下面是可用的伪状态列表：

表 1. 伪状态列表

伪状态	描述
:checked	button部件被选中
:unchecked	button部件未被选中
:disabled	部件被禁用
:enabled	部件被启用
:focus	部件获得焦点
:hover	鼠标位于部件上
:indeterminate	checkbox或radiobutton被部分选中
:off	:on
:pressed	部件被鼠标按下

8. 使用子部件定义微观样式

许多部件都包含有子元素，这些元素可以称为“子部件”。Spin box的上下箭头就是子部件最好的例子。

子部件可以通过::来指定，例如QDateTimeEdit::up-button。定义子部件的样式与定义部件非常相似，它们遵循前面提到的方箱模型（即它们可以拥有自己的边框、背景等），并且也可以和伪状态联合使用（例如QSpinBox::up-button:hover）。

下表列出了可用的子部件类型：

表 2. 子部件列表

子部件	描述
::down-arrow	combo box或spin box的下拉箭头
::down-button	spin box的向下按钮
::drop-down	combo box的下拉箭头
::up-arrow	spin box的向上箭头
::up-button	spin box的向上按钮
::indicator	checkbox、radio button或可选择group box的指示器
::item	menu、menu bar或status bar的子项目
::menu-indicator	push button的菜单指示器
::title	group box的标题

通过指定subcontrol-position和subcontrol-origin属性，子部件可以被放置在部件箱体内的任何位置。并且，子部件的位置还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。

8.1. 相对定位

相对定位适合于子部件具有固定大小的情形（通过width和height指定子部件大小）。使用这种方式，子部件可以以相对于subcontrol-position和 subcontrol-origin属性定义的原始位置进行移动调整。使用left属性可以把子部件向右移，top属性可以把子部件向左移。

例如：

QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    width: 13px;
    height: 13px;

    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}

当按下按钮时，我们可以把菜单指示器从原来的位置向右下方移动几个像素来模拟按钮按下的状态。

QPushButton::menu-indicator:pressed {
    position: relative;
    top: 2px;
    left: 2px;
}

8.2. 绝对定位

绝对定位适合于子部件的位置随父部件的变化而变的情形。与前面的例子相同，subcontrol-origin定义了父部件箱体的参考矩形。子部件的矩形区域则可以随后通过相对于这个参考矩形四边的偏移量来定义。

QPushButton::menu-indicator {
    border: 2px solid red;

    subcontrol-origin: padding;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 40px;
}

对于宽度或高度固定的子部件，subcontrol-position被用来说明其在subcontrol-origin指定矩形内的对其方式：

QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    width: 13px;
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
}

9 样式表使用

虽然Qt现在还不是特别完善，但它的跨平台性，界面重用性，已经表现出比mfc更强的、更好的性能，昨天写了qss样式表demo，但是在书上对样式表的使用，并不详细，初学者可能会遇到一些问题，今天对照官方代码，终于调通，简单记录如下：
1、建立文本文件，写入样式表内容，更改文件后缀名为qss；
2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；
3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。
样式表的方式可以很方便的完成简单的贴图工作，而且效果也不错，简化了我以前在mfc上为了贴图，不得不重写控件类个工作，也使得美工可以很方便的修改生成的程序的颜色。
当今年4月初的时候，NOKIA收购了Qt，并推出了Qt4.2，当时并没有太注意，而当mfc开发的界面不能满足我的时候，我才去研究这个新的技术。
Qt很爽，因为是C++语言，所以看起来很快，预计在明年一月底，我就可以完全掌握，而且也因为是C++代码级跨平台，所以也获得了很高的执行效率。而它生成控件的方式则比mfc上的资源文件好得多，mfc中的窗体资源全部在一个.src文件中，不利于重用，而Qt中每个窗体拥有自己的资源文件，并且和窗体类是分开的，方便了重用。从此，我不在被局限于windows平台。
我会研究一下如何在应用程序中完成widget部件的使用，因为那种透明、随意拖拽的自定义部件必将是下一代UI主流。
QApplication app(…);
QFile qss(“stylesheet.qss”);
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

10 QSS实际应用中要注意的地方

在使用QSS的时候遇到过一些坑，看似简单，但是如果不知道的话，还是很折磨人的：
<1>使用QSS设置边框无效，例如：

border:1px solid red; //Ok
border:solid 1px red; //Error
border:red 1px solid; //Error
border:red solid 1px; //Error

设置边框颜色和像素的时候，必须是第一种顺序，而CSS中是无所谓的，至于原因，我也不清楚，就是这么坑人。

<2> QSS设置宽高无效：
在QSS中设置宽高必须要使用 min-width和min-height，max-width，max-height来设置，用width和height设置是没有任何效果的。

<3>QComboBox的样式设置的问题：
QcomboBox是一个复杂的控件，QComboBox由3部分组成，一个是QComboBox的外框，里面有一个下拉按钮，这个按钮可以通过QComboBox::drop-down 来控制其位置，将其定义到QComboBox的左边而不一定是右边。另外在这个下拉按钮上面一般会有一个向下的箭头，这个箭头图像也是可以定制的，通过QComboBox::down-arrow来指定箭头的图像。

如果要控制QComboBox的弹出下拉列表的样式需要通过：

QComboBox QAbstractItemView {
  //设置当点击下拉按钮之后弹出的下拉列表的样式，要注意的是这里的样式
  //仅仅只能设置弹出的整个下拉列表范围的矩形的样式，不能设置下拉列表
  //中的每一个下拉项的样式，例如不能设置每一个下拉项高度
}
QcomboBox{
  //设置未弹出下拉列表的样式
}
QComboBox QAbstractItemView::item {
//设置弹出下拉列表中的每一个下拉项的样式，这里的样式要想生效，必须先
//对QcomboBox做下面的设置
//QStyledItemDelegate* itemDelegate = new QStyledItemDelegate();
//combox->setItemDelegate(itemDelegate);   
}

设计工具1：https://github.com/hustlei/QssStylesheetEditor
设计工具2：QSS Editor

转载自：https://blog.csdn.net/jia666666/article/details/81912455
转载自：https://www.cnblogs.com/wangqiguo/p/4960776.html#_label6