Qt-界面优化QSS

QSS介绍

先说下CSS：

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

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

QSS基础语法 

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

其中：

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

演示：

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

QSS 设置⽅式 

指定控件设置样式 

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

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

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

设置全局样式 

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

设置全局样式的优点：

演示：

样式的层叠特性 

这里这个问题：

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

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

运行效果：

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

样式的优先级 

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

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

 演示：

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

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

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

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

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

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

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

点击确定后

在Qt Designer中就直接生效了。

设置方式总结
 

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

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

选择器 

示例：

类选择器 

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

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

 id选择器

演示：

这个例子发现：

子控件选择器 

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

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

先设置一个下拉框 

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

 效果

伪类选择器 (Pseudo-States) 

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

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

常见的伪类选择器

 设置按钮的伪类样式

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

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

 需要我们设计一个类，这个类继承自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想象成这样一个矩形。 

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

 关于margin和padding的复合属性：

 示例：

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

默认是这样的：

其中：

 设置外边距

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

效果：

 演示效果：

控件样式⽰例 

按钮 

比如对于一个按钮：

关于上述的一些属性：

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

复选框 

准备了两个复选框

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

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

演示效果：

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

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

 上述例子中的一些要点：

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

输入框 

 演示效果：

上述的一些属性：

列表（设置渐变色）

 先创建一个QListWidget

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

先看使用示例：

演示效果：

关于 qlineargradient的参数：

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

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

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

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

 示例：
垂直从上往下由白色渐变到黑色

菜单栏 

 美化登录界面

初始登录界面：
 

另外，我们想给这个登录界面套一个背景图片

用qrc导入图片

效果：
 

接着设置输入框样式：

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

 效果：

设置 checkbox 样式 

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

 效果：

设置按钮样式 

效果：
 

最终效果：

Qt绘图 

绘图 API 核⼼类 

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

绘制一个线段 

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：纵坐标

 效果：