QT样式表详解

本文详细介绍qt的样式表，包含样式表如何使用，常见语句和选择器。

背景说明

样式表用于设置外观，他是设置控件外观的方式之一。其他方式如下：

1. 控件的成员函数，如QWidget::setBackground
2. 样式表
3. 调色板

优先级依次提高。调色板有最高优先级。

样式表

qt控件通过setsytlesheet(“样式表代码”)来使用样式表代码。QWidget::setstylesheet设置的qss代码作用域是设置它的控件以及其子控件。

下面是qss代码的一个举例

QPushButton {
    background-color: red;
}

这个代码的意思是把作用域的QPushButton控件的背景颜色设置为红色。

到底是哪个QPushButton的背景变成红色取决于谁调用了setstylesheet来应用这个样式表。如果是某个Qframe调用，则容器内所有的按钮背景都是红色，但其他Qframe中的按钮不受影响，因为setstylesheet的作用域只有调用它的QFrame以及QFrame中的子控件。如果是某个QPushButton调用，则只有这个QPushButton背景会变成红色,。

setsytlesheet函数使用示例

下面通过简单的例子来示意setstylesheet函数怎么用。

#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button("Click me!");
    button.setGeometry(100, 100, 200, 50);

    button.setStyleSheet("QPushButton {"
                          "    background-color: red;"
                          "}"
                          );

    button.show();

    return a.exec();
}

像这样，界面上那个调用了setStyleSheet的按钮背景颜色就变成红色了。

加载全局qss样式

我们可以在一个文件中描述所有界面上所有控件的样式。然后使用QApplication::setStyleSheet来应用全局样式。这样做的好处是分离功能和外观布局。外观布局用qss写，如果外观只是变个颜色，添加一个新的qss文件就行了，其他代码甚至都不用重新编译。下面就是加载全局样式的示例

#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/style.qss");  // 加载 qss 文件
    if (file.open(QFile::ReadOnly | QFile::Text))
    {
        QString styleSheet = QString::fromUtf8(file.readAll());
        a.setStyleSheet(styleSheet);  // 应用样式表
        file.close();
    }

    // 创建窗口和控件等代码
    // ...

    return a.exec();
}

这样写的qss代码，作用域是整个 应用程序。其中代码写在了style.qss文件中。

样式表的作用域、选择器、语句概念

• 作用域是指qss语句可能对哪些区域的控件进行设置，它取决于setStyleSheet在哪里被调用。
• 作用域是明确的，一旦调用了setStyleSheet，作用域就确定了。
• 作用域不体现在qss代码中。而体现在setStyleSheet的位置。
• 选择器是指对作用域内的哪些控件进行设置。
• 选择器是可选的，可以不存在选择器。

qss代码由选择器和语句构成，其中选择器不一定有，qss代码语法如下

选择器{
	语句1；
	语句2；
}

下面将介绍分别介绍语句和选择器

语句

语句用来描述控件的外观，需要记忆。
设置控件背景颜色：background-color: <颜色值>;
设置控件前景颜色：color: <颜色值>;
设置控件背景图片：background-image: url(<图片路径>);
设置背景图片平铺至整个控件区域，当控件大小发生变化时，背景图片也会跟着变化：background-image: url(<图片路径>);
设置背景图片居中显示，当控件大小发生变化时，背景图片不会跟着变化：background-image: url(<图片路径>) 0 0 no-repeat;
将背景图片平铺至整个控件区域，当控件大小发生变化时，背景图片会等比例拉伸：background-image: url(<图片路径>) 0 0 stretch;
设置控件背景重复方式：background-repeat: ;
设置控件背景位置：background-position: <水平位置> <垂直位置>;
设置控件大小：width: <宽度>; height: <高度>;
设置控件最小大小：min-width: <宽度>; min-height: <高度>;
设置控件最大大小：max-width: <宽度>; max-height: <高度>;
设置控件透明度：opacity: <透明度>;
设置控件的对齐方式：alignment: <左|右|中>;
设置控件的间距：spacing: <距离>;
设置控件的填充：margin: <上> <右> <下> <左>;
设置控件的边框：border: <宽度> <样式> <颜色>;
设置控件的边框颜色：border-color: <颜色>;
设置控件的边框样式：border-style: ;
设置控件的边框宽度：border-width: <宽度>;
设置控件的圆角半径：border-radius: <大小>;
设置控件的阴影：box-shadow: <位置> <大小> <颜色>;
设置控件的内边距：padding: <上> <右> <下> <左>;
设置控件的文本对齐方式：text-align: ;
设置控件的文本装饰：text-decoration: ;
设置控件的文本字间距：letter-spacing: <距离>;
设置控件的文本行间距：line-height: <大小>;
设置控件的字体：font: <字体>;
设置控件的字体大小：font-size: <大小>;
设置控件的字体颜色：color: <颜色>;
设置控件的字体加粗：font-weight: ;
设置控件的字体斜体：font-style: ;
设置控件的字体下划线：text-decoration: ;
设置控件的图标大小：icon-size: <宽度> <高度>;

选择器

选择器可以让我们定位到作用域里的某个或者某组控件，只设置这一个或者这一组控件的外观。比如作用域内上有好多按钮，我希望写一个qss，让一部分按钮的背景颜色是红色，另一部分是绿色。就需要用到选择器定位到那些有特殊要求的控件。

通用选择器

*{
	background-color: red;
}

* 就是通用选择器，它使得background-color: red作用于作用域内的所有控件。

类型选择器

选择指定的类及其子类

类名{
	语句；
}

如

QFrame{
	background-color: red;
}

选择的是作用域内的QFrame以及其子类如QLabel等。QPushButton不是QFrame的子类，所有不会被选择。

类选择器

区别于类型选择器，它只选择指定的类，而不选择其子类

.类名{
	语句;
}

如

.QFrame{
	background-color: red;
}

选择作用域内的QFrame，而其他类不受影响。

id选择器

----------------背景介绍-----------------------
控件可以通过setObjectName设置它的id。
如

QPushButton* bt1=new QPushButton();
bt1.setObjectName("button1");

----------------------------------------------------
选择指定id的控件。

#id{
	语句
}

如

#button1{
	background-color: red;
}

这样会把作用域内objectName为button1的所有控件背景颜色都设置成红色。

属性选择器

----------------背景介绍-----------------------
控件可以通过setProperty设置它的属性。
如

QPushButton* bt1=new QPushButton();
bt1.setProperty("level", "dangerous");

这样设置了bt1的level属性为dangerous
----------------------------------------------------
选择指定属性为指定值的控件

[属性名=属性值]{
	语句;
}

如

[level=dangerous]{
	background-color: red;
}

这样把作用域内所有level属性为dangerous的控件的背景颜色设置为了红色。

包含选择器

比较难描述定义，直接看示例吧

QFrame QPushButton {
    background: white;
}

这里使得QFrame下的QPushButton的背景颜色为白色。如果一个QPushButton不在某个QFrame中，是不会被选择的。
包含选择器可以不止两层，可以更多，比如QFrame下的QFrame下的QPushButton。

子元素选择器

选择一个控件的直接子控件。

父控件 > 子控件 {
	语句；
}

如

QFrame > QGroupBox {
    background: white;
}

选择QFrame下的QGroupBox，背景为白色，但不会影响QGroupBox的子控件。

伪类选择器

当控件处于某种状态时，选择它

控件名：[可选的“!”，!表示取反]状态{
	语句；
}

如

QCheckBox:!checked { 
color: red 
}

当QChectBox没有被选中时，它的颜色为红色。
常用状态

状态	说明
:disabled	Widget 被禁用时
:enabled	Widget 可使用时
:focus	Widget 得到输入焦点
:hover	鼠标放到 Widget 上
:pressed	鼠标按下时
:checked	被选中时
:unchecked	未选中时
:has-children	Item 有子 item，例如 QTreeView 的 item 有子 item 时
:has-siblings	Item 有 兄弟，例如 QTreeView 的 item 有兄弟 item 时
:open	打开或展开状态，例如 QTreeView 的 item 展开，QPushButton 的菜单弹出时
:closed	关闭或者非展开状态
:on	Widget 状态是可切换的（toggle）, 在 on 状态
:off	Widget 状态是可切换的（toggle）, 在 off 状态

subcontrol选择器

选择控件的一部分。有些控件是由多个部分组成的，例如 QCheckBox 由 icon(indicator) 和 text 组成。

类名::部分{
	语句;
}

如

QCheckBox::indicator {
    width: 20px;
    height: 20px;
}
QCheckBox {
    spacing: 8px;
}

常用的控件部分

Subcontrol	说明
::indicator	A QCheckBox, QRadioButton, checkable QMenu item, or a checkable QGroupBox’s indicator
::menu-indicator	A QPushButton’s menu indicator
::item	A QMenu, QMenuBar, or QStatusBar’s item
::up-button	A QSpinBox or QScrollBar’s up button
::down-button	A QSpinBox or QScrollBar’s down button
::up-arrow	A QSpinBox, QScrollBar, or QHeaderView’s up arrow
::down-arrow	A QSpinBox, QScrollBar, or QHeaderView’s down arrow
::drop-down	A QComboBox’s drop-down arrow
::title	A QGroupBox or QDockWidget’s title
::groove	A QSlider’s groove
::chunk	A QProgressBar’s progress chunk
::branch	A QTreeView’s branch indicator