有关于QT样式表的一些知识（使用方法和编写语法）

最新推荐文章于 2024-03-30 00:37:35 发布

AmyAndTommy

最新推荐文章于 2024-03-30 00:37:35 发布

阅读量1.3k

点赞数

分类专栏：编码文章标签： QT样式表

本文链接：https://blog.csdn.net/AmyAndTommy/article/details/82864201

版权

QT样式表简化了项目中的源代码，允许在独立文件中集中管理界面样式。本文介绍了如何创建和使用.qss文件，基础语法包括选择器、方箱模型、伪状态和子部件设置。此外，还提供了一个使用示例。

摘要由CSDN通过智能技术生成

一、QT样式表的介绍

QT样式表文件.qss类似于层叠式样式表，样式表文件能够减少项目中源原件的代码量，源代码中不必再对每个控件的样式进行设置。而且样式表是一个独立的文件，其非常便于修改，对大型工程项目的统一界面风格设计和修改都很便利。

本文仅对样式表的基础语法做一个简单的介绍，由于受实际使用时的项目经验限制，不是很全面。另，文后附一个使用实例，可供参考。

二、使用方法

先建立文本文件，书写样式表，编写完毕后重命名为.qss文件
在项目中添加Qt资源文件.qrc文件。如source.qrc，把样式表文件加入到资源文件中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件。例如在项目文件夹下创建一个source文件夹，把所有样式表用到的图片都放入这个目录下，样式表文件和资源文件也都放在这个目录下。现在在资源文件中加入qss文件路径：

<RCC>

<file>arrow_down_normal.png</file>

... ...

<file>source.qss</file>

... ...

</qresource>

</RCC>

3.在main函数中通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后

qApp->setStyleSheet就可以使qss生效。

代码如下：

QApplication app(argc, argv);

QFile qss("source.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

三、基础语法

1. 一个样式表由一系列的样式规则构成。每个样式规则都如下形式：
selector { attribute: value }

selector部分通常是一个类名(例如QComboBox)，也就是一种部件的名称；属性(attribute)部分是一个样式表属性的名字（如背景色，边框大小，字体等），值(value)部分是赋给该属性的值（颜色，大小等的值）。

也可以同时给多个部件定义，如下：

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

2. 另外介绍一下方箱模型

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

3. 伪状态的设置

定义界面元素不同的状态所展现的样式称为“伪状态样式”。伪状态和部件使用：来表示。伪状态的书写格式为：

Selector：状态 { attribute: value }

例如：

QPushButton:disabled {

padding-left: 4px;

padding-top: 4px;

background-color: gray；

}

伪状态主要有：

:checked button部件被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:indeterminate checkbox或radiobutton被部分选中
:off 部件可以切换，且处于off状态
:on 部件可以切换，且处于on状态
:pressed 部件被鼠标按下
:unchecked button部件未被选中

4.子部件的设置

许多部件都有子部件，如QComboBox的下拉箭头，子部件和主部件使用::来表示。格式为：

Selector::子部件{ attribute: value }

如果还要用到伪状态则：Sel