Qt-界面优化QSS

QSS介绍

先说下CSS：

在⽹⻚前端开发领域中, CSS 是⼀个⾄关重要的部分. 描述了⼀个⽹⻚的 "样式". 从⽽起到对⽹⻚美化的作⽤。

Qt 仿照 CSS 的模式, 引⼊了 QSS, 来对 Qt 中的控件做出样式上的设定 。

CSS的功能很强大，QSS要逊色一些，但是也能完成很多工作。

QSS基础语法 

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

其中：

选择器 描述了 "哪个 widget 要应⽤样式规则".

•

属性 则是⼀个键值对, 属性名表⽰要设置哪种样式, 属性值表⽰了设置的样式的值

使用示例：
上述代码 将按钮的文本通过QSS设置成为红色

演示：

并且上述代码中，我们只针对了这一个控件以及它的子控件生效，如果有其它按钮则不会影响其它的。

QSS 设置⽅式 

指定控件设置样式 

 在刚刚演示的代码中，我们只针对那一个按钮以及它的子控件生效。比如当我们再创建一个按钮时：

此时我们给Widget设置同样的样式：
 演示：

可以看到，在Widget的子控件中属于QPushButton类的对象的文本都变成了红色。

设置全局样式 

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

设置全局样式的优点：

使同⼀个样式针对多个控件⽣效, 代码更简洁.

•

所有控件样式内聚在⼀起, 便于维护和问题排查

演示：

样式的层叠特性 

这里这个问题：

如果设置了全局样式，同时又对某个控件设置了其它的样式，此时样式不冲突，会咋样？

比如在全局样式中我们设置文本为红色，然后又对某个样式的字体大小进行了设置。

 

运行效果：

可见，此时它们的样式就叠加起来了。这种叠加的效果成为“层叠性”。

样式的优先级 

如果全局样式, 和指定控件样式冲突, 则指定控件样式优先展⽰ 

比如我们在全局设置文本颜色为红色，然后再把第一个按钮的颜色设置为蓝色

 演示：

在 CSS 中也存在类似的优先级规则. 通常来说都是 "局部" 优先级⾼于 "全局" 优先级.

相当于全局样式先 "奠定基调" , 再通过指定控件样式来 "特事特办"

样式代码和C++代码分离 

在之前的演示中，我们的样式代码和C++代码是混合在一起的。

当我们的QSS代码非常复杂时，如果还是这样编写，那么代码的维护成本就会变得很高。

那么我们就可以专门把样式代码拎出来，放到一个文件中，后续让C++代码读取并加载文件内容。

我们同样可以用qrc管理样式文件：

但是这个方法仅供参考，因为实际开发中还有更简单的方案。

在Qt Designer中，我们可以直接把样式写入.ui文件中。

 

点击确定后

在Qt Designer中就直接生效了。

设置方式总结
 

由于样式的设置非常灵活，很多地方都能设置，这就导致当某个控件的样式不符合预期时，排查起来就比较麻烦。

因此，在实际开发中，建议使用某一种统一的方式来设置样式。

选择器 

QSS 的选择器⽀持以下⼏种

示例：

类选择器 

先看看类型选择器，它是会选择子控件的：

接着我们改为类选择器，这样就不会选择子控件了。

 

 id选择器

演示：

这个例子发现：

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

实践中我们可以简单的认为, 选择器描述的范围越精准, 则优先级越⾼. ⼀般来说, ID 选择器优

先级是最⾼的

子控件选择器 

有些控件内部包含了多个 "⼦控件" . ⽐如 QComboBox 的下拉后的⾯板, ⽐如 QSpinBox 的上下按钮等

可以通过⼦控件选择器 :: , 针对上述⼦控件进⾏样式设置 

设置下拉框的下拉按钮样式 

先设置一个下拉框 

 我也提前准备好了一个down的图片

•

使⽤⼦控件选择器 QComboBox::down-arrow 选中了 QComboBox 的下拉按钮.

•

再通过 image 属性设置图⽚

 效果

伪类选择器 (Pseudo-States) 

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

当状态具备时, 控件被选中, 样式⽣效.

•

当状态不具备时, 控件不被选中, 样式失效.

使⽤ : 的⽅式定义伪类选择器

前面介绍的选择器，都是选中控件。

 伪类选择器它选中的是控件的状态。

常见的伪类选择器

这些状态可以使⽤ ! 来取反. ⽐如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时, 等等

 设置按钮的伪类样式

如上，按钮的文本设置为红色，当鼠标放置到按钮上时，变为绿色，鼠标按下时，变为蓝色

用事件也可以达到类似的效，但是相比之下就复杂许多。

 需要我们设计一个类，这个类继承自QPushButton，然后重写四个事件处理函数：
 

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

这里就不过多演示了。

这里看似事件复杂许多，但是事件可以完成的功能不仅仅是改变样式，这一点是伪类选择器无法替代的。

 样式属性

盒模型 (Box Model) 

盒子模型来自CSS。

可以把每个QWidget想象成这样一个矩形。 

⼀个遵守盒模型的控件, 由上述⼏个部分构成.

•

Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.

•

Border 矩形区域: 控件的边框.

•

Padding 矩形区域: 内边距. 边框和内容之间的距离.

•

Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

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

 关于margin和padding的复合属性：

 示例：

设置一个文本的边框和内边距

默认是这样的：

其中：

border: 5px solid red 相当于 border-style: solid; border-width: 5px; border-color: red; 三个属性的简写形式.

•

padding-left: 10px; 是给左侧设置内边距

 设置外边距

为了⽅便确定控件位置, 演⽰外边距效果, 我们使⽤代码创建⼀个按钮 

效果：

 演示效果：

 

可以看到, 当前按钮的边框被外边距挤的缩⼩了. 但是获取到的按钮的 Geometry 是不变的

控件样式⽰例 

按钮 

比如对于一个按钮：

关于上述的一些属性：

形如 #dadbde 是计算机中通过⼗六进制表⽰颜⾊的⽅式 

复选框 

准备了两个复选框

一个给复选框未选中的时候用，另一个给·选中的时候用。

在qrc中添加进去后记得保存，这样我们就可以在Qt Designer中直接用。

演示效果：

 另外，关于这个伪类选择器也是有很多情况的：

比如当鼠标放到indicator上时，又分为indicator是否被选中的情况。在上述例子中，如果它被选中了，那么鼠标放上去的情况就是绿色的，反之就是红色的。 

 上述例子中的一些要点：

QSS 中有些属性, ⼦元素能继承⽗元素(例如 font-size, color 等). 但是也有很多属性是不能继

承的

还有一些单选框的例子就不一一举例了。

输入框 

 演示效果：

上述的一些属性：

列表（设置渐变色）

 先创建一个QListWidget

设置渐变色需要用到qlineargradient这个函数。它有6个参数。

先看使用示例：

演示效果：

关于 qlineargradient的参数：

关于它们参数的取值只能选取0或者1。

其中x1：起点的横坐标   y1：起点的纵坐标

x2：重点的横坐标，y2：重点的纵坐标。

0和1的组合可以表示一个矩形的四个角：

例如:

•

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 ⽆法设置背景图⽚. 因此我们需要再套上⼀层 QFrame. 背景图⽚就设置

到 QFrame 上即可

 

 

用qrc导入图片

使⽤ border-image 设置背景图⽚, ⽽不是 background-image . 主要是因为 border

image 是可以⾃动缩放的. 这⼀点在窗⼝⼤⼩发⽣改变时是⾮常有意义的.

 

效果：
 

接着设置输入框样式：

QLineEdit{
color: #8d98a1;
background-color: #405361;
padding: 0 5px;
font-size: 20px;
border-style: none;
border-radius: 15px;
}

 效果：

设置 checkbox 样式 

背景⾊使⽤ transparent 表⽰完全透明 (应⽤⽗元素的背景) 

 

 效果：

设置按钮样式 

 

效果：
 

 

最终效果：

 

 

Qt绘图 

 

虽然 Qt 已经内置了很多的控件, 但是不能保证现有控件就可以应对所有场景.

很多时候我们需要更强的 "⾃定制" 能⼒.

Qt 提供了画图相关的 API, 可以允许我们在窗⼝上绘制任意的图形形状, 来完成更复杂的界⾯设计

 

所谓的 "控件" , 本质上也是通过画图的⽅式画上去的.

画图 API 和 控件 之间的关系, 可以类⽐成机器指令和⾼级语⾔之间的关系.

控件是对画图 API 的进⼀步封装; 画图 API 是控件的底层实现

 

绘图 API 核⼼类 

 绘图 API 的使⽤, ⼀般不会在 QWidget 的构造函数中使⽤, ⽽是要放到 paintEvent 事件中.

 

关于 paintEvent

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

•

控件⾸次创建.

•

控件被遮挡, 再解除遮挡.

• 窗⼝最⼩化, 再恢复.

  窗⼝最⼩化, 再恢复.

•

控件⼤⼩发⽣变化时.

•

主动调⽤ repaint() 或者 update() ⽅法. (这两个⽅法都是 QWidget 的⽅法).

 

 

 

 

 

 

绘制一个线段 

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

 1.在 "widget.h" 头⽂件中声明绘图事件

2.重写这个函数

包含头文件#include <QPainter>

 效果：

 

绘制一个矩形 

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

 

效果：
 

绘制一个圆形 

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

 

 效果：