Qt开发⑫Qt界面优化之CSS_选择器

1. CSS背景介绍

2. 基本语法

3. CSS 设置方式

3.1 指定控件样式设置

3.2 全局样式设置

3.3 从文件加载样式表

3.4 使用 Qt Designer 编辑样式

4. 选择器

4.1 选择器概况

4.2 子控件选择器

4.3 伪类选择器

5. 样式属性_盒模型

5.1 设置边框和内边距

5.2 设置外边距

6. 控件样式示例

6.1 自定义按钮

6.2 自定义复选框

6.3 自定义单选框

6.4 自定义单行输入框

6.5 自定义列表框

6.6 自定义菜单栏

6.7 制作登录界面

7. 小结，本篇完。

1. CSS背景介绍

在网页前端开发领域中，CSS 是一个至关重要的部分，描述了一个网页的 “样式”，从而起到对网页美化的作用。

所谓样式，包括不限于大小、位置、颜色、背景、间距、字体等等。

现在的网页很难找到没有 CSS 的，可以说让 “界面好看” 是一个刚需。

网页开发作为 GUI 的典型代表，也对于其他客户端 GUI 开发产生了影响，Qt 也是其中之一。

Qt 仿照 CSS 的模式，引入了 QSS，来对 Qt 中的控件做出样式上的设定，从而允许我们写出界面更好看的代码。同样受到 HTML 的影响，Qt 还引入了 QML 来描述界面，甚至还可以直接把一个原生的 html 页面加载到界面上。

当然，由于 Qt 本身的设计理念和网页前端还是存在一定差异的，因此 QSS 中只能支持部分 CSS 属性。整体来说 QSS 要比 CSS 更简单一些。

注意：如果通过 QSS 设置的样式和通过 C++ 代码设置的样式冲突，则 QSS 优先级更高。

2. 基本语法

对于 CSS 来说，基本的语法结构非常简单。

选择器 {属性名: 属性值; 
}

QSS 沿用了这样的设定：

其中：

选择器描述了 “哪个 widget 要应用样式规则”。
属性则是一个键值对，属性名表示要设置哪种样式，属性值表示了设置的样式的值。

例如：

QPushButton { color: red; }

或者：

QPushButton {color: red;
}

上述代码的含义表示，针对界面上所有的 QPushButton，都把文本颜色设置为红色。

编写 QSS 时使用单行的格式和多行的格式均可。

QSS 基本使用：

（1）在界面上创建一个按钮

（2）编写代码，设置样式

（3）运行程序

观察效果，可以看到文本已经是绿色了：

注意：上述代码中，只针对这一个按钮通过 setStyleSheet 方法设置的样式，此时这个样式仅针对该按钮生效。如果创建其他按钮，其他按钮不会受到影响。

其它格式：

3. CSS 设置方式

3.1 指定控件样式设置

QWidget 中包含了 setStyleSheet 方法，可以直接设置样式。另一方面，给指定控件设置样式之后，该控件的子元素也会受到影响。

子元素受到影响，演示：

在界面上创建两个按钮和一个单行编辑框

修改 widget.cpp

这次不再给按钮设置样式，而是给 Widget 设置样式（Widget 是 QPushButton 的父控件）：

运行程序

可以看到样式对于 this 的子控件按钮同样会生效，但是必须是和选择器相关的。

3.2 全局样式设置

可以通过 QApplication 的 setStyleSheet 方法设置整个程序的全局样式。

全局样式优点：

使同一个样式针对多个控件生效，代码更简洁。
把界面上所有控件样式内聚在⼀起，便于维护和问题排查。

使用全局样式，演示：

在界面上创建三个按钮

编辑 main.cpp，设置全局样式

运行程序

可以看到此时三个按钮的颜色都设置为红色了：

样式的层叠特性：

如果通过全局样式给某个控件设置了属性 1，通过指定控件样式给控件设置属性 2，那么这两个属性都会产生作用。

在界面上创建三个按钮

编写 main.cpp，设置全局样式，把按钮文本设置为红色

编写 widget.cpp，给第一个按钮设置字体大小

运行程序可以看到，对于第一个按钮来说，同时具备了颜色和字体大小样式，而第二个按钮只有颜色样式。说明针对第一个按钮，两种设置方式设置的样式叠加起来了。

形如上述这种属性叠加的效果被称为 “层叠性”。

CSS 全称为 Cascading Style Sheets，其中 Cascading 就是 “层叠性” 的意思，QSS 也继承了这样的设定。实际上把 QSS 叫做 QCSS 也许更合适一些。

样式的优先级：

如果全局样式和指定控件样式冲突，则指定控件样式优先展示。

演示：

在界面上创建三个按钮

编辑 main.cpp，把全局样式设置为红色

编辑 widget.cpp，把第二个按钮样式设为绿色

运行程序观察效果，可以看到第二个按钮已经成为绿色了，但是第一个按钮和第三个按钮仍然是红色。

在 CSS 中也存在类似的优先级规则。通常来说都是 “局部” 优先级高于 “全局” 优先级，相当于全局样式先 “奠定基调”，再通过指定控件样式来 “特事特办”。

实际开发中，可以在全局样式中设置比较通用的样式来统一整个程序的界面风格。如果需要针对某个控件进行微调，可以使用局部样式来做出调整。

3.3 从文件加载样式表

上述代码都是把样式通过硬编码的方式设置的，这样使 QSS 代码和 C++ 代码耦合在一起了，并不方便代码的维护。因此更好的做法是把样式放到单独的文件中，然后通过读取文件的方式来加载样式。

从文件加载全局样式

在界面上创建一个按钮

创建 resource.qrc 文件，并设定前缀为 /

创建 style.qss 文件，并添加到 resource.qrc 中

style.qss 是需要程序运行时加载的。为了规避绝对路径的问题，仍然使用 qrc 的方式来组织（即把资源文件内容打包到 cpp 代码中）。
Qt Creator 没有提供创建 qss 文件的选项，直接 “右键” -> “新建” -> “文本文档”，手动设置文件扩展名为 qss 即可。

使用 Qt Creator 打开 style.qss，编写内容

修改 main.cpp，新增一个函数用来加载样式

修改 main.cpp，在 main 函数中调用上述函数，并设置样式

运行程序可以看到样式已经生效了：

理论上来说 Qt 应该要提供直接从文件加载样式表的接口。类似于 setStyleSheetFromFile(const QString& path) 这种，在内部把读文件操作封好。

3.4 使用 Qt Designer 编辑样式

QSS 也可以通过 Qt Designer 直接编辑，从而起到实时预览的效果，同时也能避免 C++ 和 QSS 代码的耦合。

使用 Qt Designer 编辑样式，演示：

在界面上创建一个按钮

选择最外层的窗口，右键按钮，选择 “改变样式表”

在弹出的样式表编辑器中，可以直接填写样式，填写完毕点击 OK 即可

这里进行的修改都会记录到 ui 文件中，并且在程序运行时自动生效，还能进行实时预览。

此时 Qt Designer 的预览界面就会实时显示出样式的变化

运行程序可以看到样式确实发生了改变：

这种方式设置样式，样式内容会被以 xml 格式记录到 ui 文件中。

同时在控件的 styleSheet 属性中也会体现：

由于设置样式太灵活，有很多地方都能设置，所以当我们发现一个控件的样式不符合预期的时候，要记得排查这四个地方：

全局样式（QAppplication 设置的）
指定控件样式（这个控件是否设置了样式）
qss 文件中的样式
ui 文件中的样式
指定控件的父控件的样式（可能是从父控件继承过来的）

在实际开发中，如果需要设置样式，建议最好统一使用某一种方式来设置。

4. 选择器

Qt 提供了多种样式表选择器来定位和应用样式到不同的控件上。这些选择器允许开发者精确控制哪些控件会受到样式的更改影响。

4.1 选择器概况

QSS 的选择器支持以下几种：

总体来说，QSS 选择器的规则和 CSS 选择器基本一致。

使用类型选择器选中子类控件，演示：

在界面上创建一个按钮

修改 main.cpp，设置全局样式

注意：此处选择器使用的是 QWidget。QPushButton 也是 QWidget 的子类，所以会受到 QWidget 选择器的影响。

运行程序可以看到按钮的文本颜色已经是红色了：

如果把上述样式代码修改为下列代码

此时按钮的颜色不会发送改变。此时只是选择 QWidget 类，而不会选择 QWidget 的子类 QPushButton 了。

使用 id 选择器，演示：

在界面上创建 3 个按钮，objectName 为 pushButton、pushButton_2、pushButton_3

编写 main.cpp，设置全局样式

先通过 QPushButton 设置所有的按钮为红色。
再通过 #pushButton 和 #pushButton_2 分别设置这两个按钮为绿色和黄色。

执行效果

当某个控件身上，通过类型选择器和 ID 选择器设置了冲突的样式时，ID 选择器样式优先级更高。

同理，如果是其他的多种选择器作用同一个控件时出现冲突的样式，也会涉及到优先级问题。Qt 文档上有具体的优先级规则介绍（参见 The Style Sheet Syntax 的 Conflict Resolution 章节）

这里的规则计算起来非常复杂（CSS 中也存在类似的设定）。可以简单的认为，选择器描述的范围越精准，则优先级越高。一般来说，ID 选择器优先级是最高的。

如果属性不冲突，还是会同时生效：

使用并集选择器

创建三个按钮、一个 label、一个单行输入框

编写 main.cpp，设置全局样式

运行程序可以看到这三种控件的文字颜色都设置为了红色：

并集选择器是一种很好的代码复用的方式，很多时候我们希望界面上的多个元素风格是统一的，就可以使用并集选择器，把样式属性同时指定给多种控件。

也可以指定 id 选择器：

展示效果：

4.2 子控件选择器

有些控件内部包含了多个 “子控件”，比如 QComboBox 的下拉后的面板，比如 QSpinBox 的上下按钮等。可以通过子控件选择器 ::，针对上述子控件进行样式设置。

哪些控件拥有哪些子控件，参考文档 Qt Style Sheets Reference 中 List of Sub-Controls 章节。

设置下拉框的下拉按钮样式，演示：

在界面上创建一个下拉框，并创建几个选项

创建 resource.qrc，并导入图片 down.png

修改 main.cpp，编写全局样式

使用子控件选择器 QComboBox::down-arrow 选中了 QComboBox 的下拉按钮。
再通过 image 属性设置图片。

执行程序

修改进度条的颜色，演示：

在界面上创建一个进度条

在 Qt Designer 右侧的属性编辑器中，找到 QWidget 的 styleSheet 属性

编辑如下内容：

其中的 chunk 是选中进度条中的每个 “块”，使用 QProgressBar::text 则可以选中文本。
同时把 QProcessBar 的 alignment 属性设置为垂直水平居中。

此处如果不设置 alignment，进度条中的数字会跑到左上角（这个怀疑是 Qt 本身的 bug，暂时只能先使⽤ alignment 来手动调整一下）。

执行程序可以看到如下效果，就得到了一个红色的进度条：

通过上述方式，也可以修改文字的颜色，字体大小等样式。

4.3 伪类选择器

伪类选择器，是根据控件所处的某个状态被选择的。

例如按钮被按下，输入框获取到焦点，鼠标移动到某个控件上等。

当状态具备时，控件被选中，样式生效。
当状态不具备时，控件不被选中，样式失效。

使用 : 的方式定义伪类选择器。

常用的伪类选择器：

这些状态可以使用 ! 来取反，比如 :!hover 就是鼠标离开控件时，:!pressed 就是鼠标松开时，等等。更多伪类选择器的详细情况可以参考 Qt Style Sheets Reference 的 Pseudo-States 章节。

设置按钮的伪类样式，演示：

在界面上创建一个按钮

编写 main.cpp，创建全局样式

运行程序可以看到默认情况下按钮文字是红色，鼠标移动上去是绿色，鼠标按下按钮是蓝色：

上述代码也可以使用事件的方式来实现。

使用事件方式实现同样效果，演示：

创建 MyPushButton 类，继承自 QPushButton

把生成代码中的构造函数改成带参数 QWidget* 版本的构造函数（否则无法和 Qt Designer 生成的代码适配）

// mypushbutton.h
#include <QPushButton>class MyPushButton : public QPushButton
{
public:MyPushButton(QWidget* parent);
};// mypushbutton.cpp
#include "mypushbutton.h"
MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{}

在界面上创建按钮，并提升为 MyPushButton 类型

右键按钮，选择 “提升为...”：

填写提升的类名和头文件：

提升完毕后，在右侧对象树这里，就可以看到类型的变化。

重写 MyPushButton 的四个事件处理函数

修改 mypushbutton.h

class MyPushButton : public QPushButton
{
public:MyPushButton(QWidget* parent);void mousePressEvent(QMouseEvent* e);void mouseReleaseEvent(QMouseEvent* e);void enterEvent(QEvent* e);void leaveEvent(QEvent* e);
};

修改 mypushbutton.cpp

初始化设为红色
鼠标进入时设为绿色，离开是还原红色
鼠标按下时设为蓝色，松开时还原绿色（松开时鼠标还是在按钮里）

MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{this->setStyleSheet("QPushButton { color: red; }");
}void MyPushButton::mousePressEvent(QMouseEvent *e)
{this->setStyleSheet("QPushButton { color: blue; }");
}void MyPushButton::mouseReleaseEvent(QMouseEvent *e)
{this->setStyleSheet("QPushButton { color: green; }");
}void MyPushButton::enterEvent(QEvent *e)
{this->setStyleSheet("QPushButton { color: green; }");
}void MyPushButton::leaveEvent(QEvent *e)
{this->setStyleSheet("QPushButton { color: red; }");
}

运行程序可以看到效果和上述案例一致：

很明显，实现同样的功能，伪类选择器要比事件的方式简单很多。但是不能就说事件机制就不好，事件可以完成的功能很多，不仅仅是样式的改变，还可以包含其他业务逻辑，这一点是伪类选择器无法替代的。

5. 样式属性_盒模型

QSS 中的样式属性非常多，大部分的属性和 CSS 是非常相似的。

文档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性，每个控件都能设置哪些属性等。

相关的代码示例，在后面具体介绍。在翻阅文档的时候涉及到一个关键术语 “盒模型”（Box Model）。

盒模型（Box Model）

在文档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型：

一个遵守盒模型的控件，由上述几个部分构成。

Content 矩形区域：存放控件内容，比如包含的文本 / 图标等。
Border 矩形区域：控件的边框。
Padding 矩形区域：内边距，边框和内容之间的距离。
Margin 矩形区域：外边距，边框到控件 geometry 返回的矩形边界的距离。

默认情况下，外边距、内边距、边框宽度都是 0。

可以通过一些 QSS 属性来设置上述的边距和边框的样式：

5.1 设置边框和内边距

在界面上创建一个 label

修改 main.cpp, 设置全局样式

border: 20px solid green 相当于 border-style: solid; border-width: 2px; border-color: green; 三个属性的简写形式。
padding-left: 50px; 是给左侧设置内边距。

运行程序

5.2 设置外边距

为了方便确定控件位置，演示外边距效果，使用代码创建⼀个按钮。

修改 widget.cpp，创建按钮，并设置样式

运行程序可以看到，当前按钮的边框被外边距挤的缩小了，但是获取到的按钮的 Geometry 是不变的。

6. 控件样式示例

6.1 自定义按钮

界面上创建一个按钮

右键 -> 改变样式表，使用 Qt Designer 设置样式

执行程序

点击 “按钮”：

属性小结

形如 #dadbde 是计算机中通过十六进制表示颜色的方式。

6.2 自定义复选框

创建一个 resource.qrc 文件，并导入以下图片

使用黑色作为默认形态
使用蓝色作为 hover 形态
使用红色作为 pressed 形态

注意这里的文件命名。

创建一个复选框

编辑复选框的样式

运行程序鼠标点击选中，再取消的过程，可以看到此时的复选框就变得丰富起来了：

小结

6.3 自定义单选框

创建 resource.qrc 文件，并导入以下图片

使用黑色作为默认形态
使用蓝色作为 hover 形态
使用红色作为 pressed 形态

注意这里的文件命名。

在界面上创建两个单选按钮

在 Qt Designer 中编写样式

此处为了让所有 QRadioButton 都能生效，把样式设置在 Widget 上了，并且使用后代选择器选中了 QWidget 里面的 QRadioButton。

注意：QSS 中有些属性，子元素能继承父元素（例如 font-size、color 等），但是也有很多属性是不能继承的。具体哪些能继承哪些不能继承，规则比较复杂，我们不去具体研究，实践中我们编写更精准的选择器是上策。

QWidget QRadioButton {font-size: 20px;
}QWidget QRadioButton::indicator {width: 20px;height: 20px;
}QWidget QRadioButton::indicator:unchecked {image: url(:/radio-unchecked.png);
}QWidget QRadioButton::indicator:unchecked:hover {image: url(:/radio-unchecked_hover.png);
}QWidget QRadioButton::indicator:unchecked:pressed {image: url(:/radio-unchecked_pressed.png);
}QWidget QRadioButton::indicator:checked {image: url(:/radio-checked.png);
}QWidget QRadioButton::indicator:checked:hover {image: url(:/radio-checked_hover.png);
}QWidget QRadioButton::indicator:checked:pressed {image: url(:/radio-checked_pressed.png);
}

运行程序

6.4 自定义单行输入框

在界面上创建一个单行输入框

在 Qt Designer 中编写样式

执行程序，输入 "hello world"，选中 "rld"：

6.5 自定义列表框

在界面上创建一个 ListView

编写代码

执行程序

鼠标停放在上面：

选中：

qlineargradient 有 6 个参数。

x1, y1：标注了⼀个起点
x2, y2：标注了⼀个终点

这两个点描述了⼀个 “方向”。

例如：

x1: 0, y1: 0, x2: 0, y2: 1 就是垂直方向从上向下进行颜色渐变。
x1: 0, y1: 0, x2: 1, y2: 0 就是水平方向从左向右进行颜色渐变。
x1: 0, y1: 0, x2: 1, y2: 1 就是从左上往右下方向进行颜色渐变。

stop0 和 stop1 描述了两个颜色，渐变过程就是从 stop0 往 stop1 进行渐变的。

理解渐变色：

界面不创建任何控件，然后编写样式

QWidget {background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #fff, stop: 1 #000);
}

当前按照垂直从上往下从白色过渡到黑色。

执行效果：

修改代码

QWidget {background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 #fff, stop: 1 #000);
}

当前按照水平从左往右从白色过渡到黑色。

执行效果：

6.6 自定义菜单栏

创建若干菜单项和一个分隔符：

编写样式

执行效果

6.7 制作登录界面

基于上述学习过的 QSS 样式，制作一个美化版本的登录界面：

在界面上创建元素，并使用布局管理器把相关元素包裹一下

使用 QVBoxLayout 来管理上述控件。
两个输入框和按钮的 minimumHeight 均设置为 50（元素在布局管理器中无法直接设置 width 和 height，使用 minimumWidth 和 minimumHeight 代替，此时垂直方向的 sizePolicy 要设为 fixed）。
右键 QCheckBox，选择 Layout Alignment 可以设置 checkbox 的对齐方式（左对齐，居中对齐，右对齐）。

设置背景图片

把上述控件添加一个父元素 QFrame，并设置 QFrame 和窗口一样大。

顶层窗口的 QWidget 无法设置背景图片，因此我们可以再套上一层 QFrame，背景图片就设置到 QFrame 上即可。

创建 resource.qrc，并导入图片：

编写 QSS 样式：

使用 border-image 设置背景图片，而不是 background-image。主要是因为 border-image 是可以自动缩放的，这一点在窗口大小发生改变时是非常有意义的。

效果：

设置输入框样式，编写 CSS 代码：

效果：

设置 checkbox 样式和设置按钮样式

背景色使用 transparent 表示完全透明（应用父元素的背景）。

css">QFrame {border-image: url(:/background1.jpg)
}QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border-style: none;border-radius: 10px;
}QCheckBox {color: white;background-color: transparent;
}QPushButton {font-size: 20px;color: white;background-color: #555;border-style: outset;border-radius: 10px;
}QPushButton:pressed {color: black;background-color: #ced1db;border-style: inset;
}

执行程序：