Qt学习15：QSS界面美化

文章首发于我的个人博客：欢迎大佬们来逛逛
Qt项目地址及源码：点击这里

Qt样式表

Qt样式表(Qt Style Sheet)是用于定制用户界面的一种机制。

是受到到HTML中的**层级样式表CSS**(Cascading Style Sheets,CS2S)启发而来，只是Qt样式表是用于窗体界面的。

我们可以使用QSS来完成对软件的换肤功能。

---

我们首先了解一下QSS包括CSS最基本的结构：盒子模型

盒子模型是qss技术所使用的一种思维模型。盒子模型是指将界面设计页面中的内容元素看作一个个装了东西的矩形盒子。

每个矩形盒子包括：

• 内容(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin)。

我们可以设置这些不同的参数来完成对他们的调节。

---

如何编写样式表？

我们选择一个最基本的Label作为演示：

然后**右键这个Label，选择改变样式表**

我们就可以在这个窗口中愉快的编写样式表了。

---

font

简单示例：

• font-family：字体族
• color：字体颜色
• font-size：字体尺寸
• font-weight：字体的宽度样式
• font-style：字体样式（斜体还是正常）

等同于直接设置 font：font-style font-weight font-size font- faily

中间用空格隔开。

效果如下：

---

border

• border-style：设置边框的样式

• border-color：设置边框颜色

• border-width：设置边框的宽度。

  同理可以使用： border: border-width border-style border-color

---

padding

设置文本居中对齐，注意QSS没有text-align，因此必须设置内边距padding。

在这里我们设置了 padding-left：30px，得到如下的效果，同时也可以直接：

• padding：上右下左
• padding-right ，top，bottom

---

有关更加详细的层叠样式表的知识请看CSS或QSS文档。

如何高效的编写QSS？

我们注意到在qtcreator上写QSS没有提示，而且字体很小，很丑，我们可以通过以下的方式来在vscode上编写，然后导入到qt项目中，众所周知vscode上具有对CSS语法的提示与高亮功能。

步骤：

1. 首先vscode上新建一个**CSS文件** ，然后保存到qt的项目中，注意就添加一个图片一样，添加一个 **qrc**文件，然后导入到qrc中。

1. 导入到qrc之后，选择拷贝链接，然后转到 widget.cpp 文件中，输入以下的代码：

代表我们创建了一个QFile文件，然后这个文件指向这个样式表，然后我们打开它，直接**readAll**读取全部内容即可。

//外部加载
    QFile qssFile(":/images/qss/qt.css");
    if (qssFile.open(QFile::OpenModeFlag::ReadOnly)){
   
   
        this->setStyleSheet(qssFile.readAll());
    }

测试如下： 成功了。

因此我们以后编写QSS文件时直接在vscode上编写就可以了，然后再加载进Qt程序中。

然后选择运行就行。

---

选择器

关于选择器的概念与CSS类似。

CSS 选择器规定了 CSS 规则会被应用到哪些元素上，QSS同理。

选择器的类型：

选择器类型

选择器	示例	描述
通用选择器	*	匹配所有控件
类型选择器	QPushButton	匹配给定类型控件，包括子类
类选择器	.QPushButton	匹配给定类型控件，不包括子类
属性选择器	QPushButton[flat=“false”]	匹配给定类型控件中符合[属性]的控件
ID选择器	QPushButton#closeBtn	匹配给定类型，且对象名为closeBtn的控件
子孙对象选择器	QDialog QPushButton	匹配给定类型的子孙控件
子对象选择器	QDialog>QPushButton	匹配给定类型的直接子控件
辅助(子控件)选择器	QComboBox::drop-down	复杂对象的子控件
伪状态选择器	QPushButton:hover	控件的特定状态下的样式
并集选择器	QPushButton,QCheckBox

通用选择器

应用到所有的控件中，包括主窗口Widget

/*通用选择器*/
*{
   
   
    background-color: red;
}

请注意：它的优先级是最低的，即如果我们给其他的控件已经设置了样式，则它就是我们设置的那样，如下图，我们已经给QLabel设置了样式了，因此会匹配为QLabel的样式，实际上刚刚我们的QLabel就是一个类型选择器，可以看到类型选择器比通用选择器的优先级高。

---

类型选择器与类选择器

它就是针对某个控件的样式设置，注意它包含子类。

即如果我们对QAbstractButton设置了样式，则QPushButton的样式也会改变，因为QPushButton继承自QAbstractButton。

/*类型选择器*/
QAbstractButton{
   
   
    background-color: antiquewhite;
}

可以看到所有的按钮都被设置样式了。

对于类选择器，可以说他是真正的精准匹配的方式。

只需要在前面添加一个 . 号

/*类选择器*/
.QAbstractButton{
   
   
    background-color: antiquewhite;
}

则子类的样式不会被改变，只会匹配具体的控件，显然QAbstractButton不是一个具体的控件。

---

属性选择器

对于某些按钮，如QPushButton的**checkable**属性，我们可以设置这个按钮为无法选中状态，则我们就可以在这个状态设置样式：

/*属性选择器*/
QPushButton[checkable = 'true']{
   
   
    background-color: chocolate;
}

我们首先为几个按钮指定以下这个checkable属性，则我们就会发现满足这个属性的控件的样式都被更改了。

---

ID选择器

如果我们指定了某个控件的ID名字，实际上就是这个变量的名字，则我们就可以使用ID选择器，

	/*ID选择器*/
QPushButton#btn1{
   
   
    background-color: fuchsia;
}

简单来说就是对**指定的控件变量**设置样式。注意：ID是唯一的。