1.QSS

在网页前端开发领域中，CSS 是一个至关重要的部分，描述了一个网页的 “样式”，从而起到对网页美化的作用。所谓样式，包括不限于大小、位置、颜色、背景、间距、字体等等。

网页开发作为 GUI 的典型代表，也对于其他客户端 GUI 开发产生了影响，Qt 也是其中之一。Qt 仿照 CSS 的模式，引入了 QSS，来对 Qt 中的控件做出样式上的设定，从而允许程序猿写出界面更好看的代码。

同样受到 HTML 的影响，Qt 还引入了 QML 来描述界面，甚至还可以直接把一个原生的 html 页面加载到界面上。当然，由于 Qt 本身的设计理念和网页前端还是存在一定差异的，因此 QSS 中只能支持部分 CSS 属性，整体来说 QSS 要比 CSS 更简单一些。

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

1.1基本语法

基本的语法结构

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

其中:

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

QPushButton {color: red;
}

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

1.2指定控件样式设置

QWidget 中包含了 setStyleSheet 方法，可以直接设置样式

范围是pushButton_1控件及其所有子控件，进一步通过选择器选择的是QPushButton控件

将字体颜色设置为红色

范围是窗口及其所有子控件，进一步通过选择器选择的是QPushButton控件

将字体颜色设置为红色

我们是只针对这一个按钮通过 setStyleSheet 方法设置的样式，此时这个样式仅针对该按钮生效。如果创建其他按钮，其他按钮不会受到影响。

1.3设置全局样式

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

全局样式优点

• 使同一个样式针对多个控件生效, 代码更简洁
• 所有控件样式内聚在一起, 便于维护和问题排查

代码示例：样式的层叠特性

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

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

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

代码示例: 样式的优先级

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

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

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

1.4 从文件加载样式表

上述代码都是把样式通过硬编码的方式设置的，这样使 QSS 代码和 C++ 代码耦合在一起了，如果QSS代码简单就无所谓了，一旦QSS代码复杂，继续这样写，以后的代码的维护代价非常的高。因此更好的做法是把样式放到单独的文件中，然后通过读取文件的方式来加载样式。

先创建一个.qss文件，将其导入到qrc中

编辑.qss文件

将.qss文件中的内容加载到代码中，写一个用于加载的函数

这个方案仅供参考，在实际开发中还有更方便的方案。

1.5使用 Qt Designer 编辑样式

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

代码示例: 使用 Qt Designer 编辑样式

1.在界面上创建一个按钮

2.右键按钮, 选择 “改变样式表”

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

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

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

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

<property 1 name="styleSheet">
<string notr="true">QPushButton { color: red; }</string>
</property>

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

当我们发现一个控件的样式不符合预期的时候，要记得排查这四个地方：

• 全局样式
• 指定控件样式
• qss 文件中的样式
• ui 文件中的样式

1.6 选择器

1.6.1 选择器概况

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

上述选择器也不需要全都掌握，只熟悉最常用的几个即可(上述加粗的)。

1.6.2id 选择器

1.在界面上创建 3 个按钮, objectName 为 pushButton , pushButton_2 , pushButton_3

2.编写 main.cpp, 设置全局样式

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

执行程序, 观察效果

当某个控件身上, 通过类型选择器和 ID 选择器设置了冲突的样式时, ID 选择器样式优先级更高。同理, 如果是其他的多种选择器作用同一个控件时出现冲突的样式, 也会涉及到优先级问题。实践中我们可以简单的认为，选择器描述的范围越精准, 则优先级越高。一般来说，ID 选择器优先级是最高的。

1.6.3并集选择器

1.创建按钮, label, 单行输入框

2.编写 main.cpp, 设置全局样式

1.6.4子控件选择器

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

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

代码示例: 设置下拉框的下拉按钮样式

1.在界面上创建一个下拉框, 并创建几个选项

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

3.修改 main.cpp, 编写全局样式

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

4.执行程序, 观察效果

代码示例: 修改进度条的颜色

1.在界面上创建一个进度条

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

编辑如下内容:

• 其中的 chunk 是选中进度条中的每个 “块”，使用 QProgressBar::text 则可以选中文本

QProgressBar::chunk {background-1 color: #FF0000;}

同时把 QProcessBar 的 alignment 属性设置为垂直水平居中

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

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

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

1.6.5 伪类选择器(Pseudo-States)

伪类选择器, 是根据控件所处的某个状态被选择的. 例如按钮被按下, 输入框获取到焦点, 鼠标移动到某

个控件上等.

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

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

常用的伪类选择器

这些状态可以使用 ! 来取反，比如 :!hover 就是鼠标离开控件时，:!pressed 就是鼠标松开时等等。

更多伪类选择器的详细情况，参考 Qt Style Sheets Reference 的 Pseudo-States 章节。

代码示例: 设置按钮的伪类样式.

1.在界面上创建一个按钮

2.编写 main.cpp, 创建全局样式

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

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

代码示例: 使用事件方式实现同样效果

1.创建 MyPushButton 类, 继承自 QPushButton

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

mypushbutton.h

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

mypushbutton.h

#include 1 <QPushButton>
class MyPushButton : public QPushButton
{
public:MyPushButton(QWidget* parent);
};

mypushbutton.cpp

#include "mypushbutton.h"
MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{
}

右键按钮, 选择 “提升为”

填写提升的类名和头文件

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

2.重写 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

• 初始化设为红色
• 鼠标进入时设为绿色, 离开是还原红色.
• 鼠标按下时设为蓝色, 松开时还原绿色(松开时鼠标还是在按钮里)

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

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; }");
}

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

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

1.7样式属性

QSS 中的样式属性非常多，不需要都记住，核心原则还是用到了就去查，大部分的属性和 CSS 是非常相似的，文档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性，每个控件都能设置哪些属性等。

在翻阅文档的时候涉及到一个关键术语 “盒模型” (Box Model)

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

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

默认情况下, 外边距, 内边距, 边框宽度都是 0

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

代码示例: 设置边框和内边距

1.

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

• border: 5px solid red 相当于 border-style: solid；border-width: 5px；border-color: red三个属性的简写形式
• padding-left: 10px是给左侧设置内边距

2.运行程序，可以看到样式发生了变化

代码示例: 设置外边距

为了方便确定控件位置, 演示外边距效果, 我们使用代码创建一个按钮

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

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

1.8控件样式示例

1.8.1按钮

代码示例：自定义按钮

1.界面上创建一个按钮

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

属性小结

运行程序，可以看到此时的复选框就变的丰富起来了

1.8.2 复选框

代码示例: 自定义复选框

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

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

2.创建一个复选框

3.编辑复选框的样式

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

4.运行程序, 观察效果

小结：

1.8.3 单选框

代码示例: 自定义单选框

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

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

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

3.在 Qt Designer 中编写样式

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

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);
}

1.8.4输入框

代码示例: 自定义单行编辑框

1.在界面上创建一个单行编辑框

2.在 Qt Designer 中编写样式

QLineEdit {border-width: 1px;border-radius: 10px;border-color: rgb(58, 58, 58);border-style: inset;padding: 0 8px;color: rgb(255, 255, 255);background:rgb(100, 100, 100);selection-background-color: rgb(187, 187, 187);selection-color: rgb(60, 63, 65);
}

3.执行程序观察效果

1.8.5 列表

代码示例: 自定义列表框

1.在界面上创建一个 ListView

2.编写代码

QListView::item:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListView::item:selected {border: 1px solid #6a6ea9;background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #6a6ea9, stop: 1 #888dd9);
}

3.执行程序, 观察效果

qlineargradient 有 6 个参数

x1, y1: 标注了一个起点

x2, y2: 标注了一个终点.

这两个点描述了一个 “方向”

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

例如:

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

1.8.6 菜单栏

1.创建菜单栏

2.编写样式

QMenuBar {background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 lightgray, stop:1 darkgray);spacing: 3px; /* spacing between menu bar items */
}
QMenuBar::item {padding: 1px 4px;background: transparent;border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */background: #a8a8a8;
}
QMenuBar::item:pressed {background: #888888;
}
QMenu {background-color: white;margin: 0 2px; /* some spacing around the menu */
}
QMenu::item {padding: 2px 25px 2px 20px;border: 3px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {border-color: darkblue;background: rgba(100, 100, 100, 150);
}
QMenu::separator {height: 2px;background: lightblue;margin-left: 10px;margin-right: 5px;
}

3.执行程序, 观察效果

1.8.7登录界面

给界面创建元素

此时界面布局不够整齐、不够合理，通过布局管理器进行调整

添加垂直布局管理器

此时会发现各个控件大小不合理

设置Line Edit最大高度和最小高度都为40，此时Line Edit的高度固定为40像素

同样设置QPushButton的宽度和高度设置为90*30像素

给窗口设置一个背景

直接想法，是给顶层窗口设置背景图，但是Qt存在限制，直接给顶层窗口设置背景会失效。

给顶层窗口创建一个同样大小的QFrame的子对象，QFrame相对于QWidget提供了更多的功能，比如设置形状、设置样式。

在Qt中除了background-image设置背景图除了，还有border-image来设置背景图，推建使用border-image来设置背景图设置背景图，通过border-image设置的背景图根据窗口大小同步的变化，而background-image设置背景图是固定大小。

设置背景后的界面效果

设置了背景图还不够，针对上面的控件还需要在样式上进一步设计。

这里统一在QWidget上进行样式的修改

1.设置输入框样式

编写 QSS 代码

2.设置 checkbox 样式

背景色使用 transparent 表示完全透明 (应用父元素的背景)

3.设置按钮样式

4.为了让用户明却输入的是什么，设置placeholderText属性

5.密码框中的内容默认是不显示的，设置隐藏

选择密码框，找到echoMode选项，选择Password

2.绘图

虽然 Qt 已经内置了很多的控件, 但是不能保证现有控件就可以应对所有场景，很多时候我们需要更强的 “自定制” 能力。所谓的 “控件” , 本质上也是通过画图的方式画上去的，控件是对画图 API 的进一步封装，画图 API 是控件的底层实现。

和绘图相关的类

绘图 API 的使用，一般不会在 QWidget 的构造函数中使用, 而是要放到 paintEvent 事件中。

paintEvent 会在以下情况下被触发:

• 控件首次创建
• 控件被遮挡, 再解除遮挡
• 窗口最小化,再恢复
• 控件大小发生变化时
• 主动调用 repaint() 或者 update() 方法. (这两个方法都是 QWidget 的方法)

2.1绘制线段

示例1：

void drawLine(const QPoint &p1, const QPoint &p2);
参数：
p1：绘制起点坐标
p2：绘制终点坐标

示例2：

void drawLine ( int x1, int y1, int x2, int y2 );
参数：
x1,y1：绘制起点坐标
x2,y2：绘制终点坐标

1.在 “widget.h” 头文件中声明绘图事件

2.在 “widget.cpp” 文件中重写 paintEvent() 方法

实现效果如下：

2.2绘制矩形

void QPainter::drawRect(int x, int y, int width, int height)；
参数：
x：窗口横坐标；
y：窗口纵坐标；
width：所绘制矩形的宽度；
height：所绘制矩形的高度；

2.3 绘制圆形

void QPainter::drawEllipse(const QPoint &center, int rx, int ry)
参数：
center：中心点坐标
rx：横坐标
ry：纵坐标

实现效果：

2.4 绘制文本

QPainter类中不仅提供了绘制图形的功能，还可以使用drawText() 函数来绘制文字，也可以使用setFont() 设置字体等信息。

实现效果如下：

2.5 设置画笔

QPainter 在绘制时，是有一个默认的画笔的。在使用时也可以自定义画笔。在 Qt 中，QPen类中定义

了 QPainter 应该如何绘制形状、线条和轮廓。同时通过 QPen类 可以设置画笔的线宽、颜色、样式、

画刷等。

画笔的颜色可以在实例化画笔对象时进行设置，画笔的宽度是通过 setWidth() 方法进行设置，画笔的

风格是通过setStyle(）方法进行设置，设置画刷主要是通过 setBrush() 方法。

• 设置画笔颜色：QPen::QPen(const QColor &color) 画笔的颜色主要是通过 QColor 类设置；
• 设置画笔宽度：void QPen::setWidth(int width)
• 设置画笔风格：void QPen::setStyle(Qt::PenStyle style)

画笔的风格有：

实现效果如下：

2.6 设置画刷

在 Qt 中，画刷是使用 QBrush类 来描述，画刷大多用于填充。QBrush定义了QPainter的填充模式，具有样式、颜色、渐变以及纹理等属性。

画刷的格式中定义了填充的样式，使用 Qt::BrushStyle 枚举，默认值是 Qt::NoBrush，也就是不进行任何填充。可以通过 Qt 助手查找画刷的格式。

实现效果：

2.7绘制图片

其实绘制图片本质上是将图片显示到控件上。

2.7.1绘制基础图片

2.7.2图片旋转

2.7.3QImage、QPixmap、QBitmap 和 QPicture的区别

Qt 提供了四个类来处理图像数据：QImage、QPixmap、QBitmap 和 QPicture，它们都是常用的绘图设备。

• QImage主要用来进行 I/O 处理，它对 I/O 处理操作进行了优化，而且可以用来直接访问和操作像素；
• QPixmap 主要用来在屏幕上显示图像，它对在屏幕上显示图像进行了优化；
• QBitmap是 QPixmap 的子类，用来处理颜色深度为1的图像，即只能显示黑白两种颜色；
• QPicture 用来记录并重演 QPainter 命令。