Qt --- 界面优化 --- QSS和绘图API

界面优化 =》美化

一个程序的界面是否好看，是否重要呢。

有些面向专业领域的程序，界面好看与否，不是看关键，更关键的是实际的效果。有些面向普通用户领域的程序，界面好看，还是很大的加分项。

界面优化 Qt中使用QSS =》网页前端 CSS

能够针对界面的样式来进行设置。包括不限于：大小、位置、颜色、背景、间距、字体……

CSS的功能是非常强大，非常丰富的。QSS要逊色一些，也能完成很多的工作。有时候，可以通过QSS设置样式。也可以通过C++代码设置样式。如果两者冲突，QSS优先级最好

基本语法：

选择器：先选择某个/某一类控件，接下来进行各种属性设置，都是针对选中的控件生效的。

键值对：针对某些样式具体的设置了。

上述代码的含义是把QPushButton按钮的文本设置成为红色。

一、QSS基础使用

代码：

设置样式的时候，是可以指定某个控件来设置的。指定控件之后，此时的样式就会针对这个指定的控件，也会针对子空间生效。

既要考虑到子空间，也要考虑到选择器的筛选。

设置全局样式

界面上所有的样式都集中到一起来组织。

如果设置了全局样式，然后在某个控件里有设置了其他样式，会怎么样。

此时这两方面的样式，会叠加起来。这叫做层叠性。

如果设置了全局样式，在某个控件里设置的样式和全局样式冲突了，又会怎么样。

局部样式的优先级是更高的，覆盖了对应的全局样式。

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

二、样式和代码的分离

QSS上述代码中，样式代码和C++代码都是混在一起的。如果QSS样式代码比较简单，无所谓了，如果QSS代码非常复杂，继续这样搞，代码的维护成本就很高了。

我们可以把样式代码拎出来，放到单独的文件中，后续可以直接让C++代码来读取并加载文件内容。就可以解耦合了。

代码：

1、创建qrc文件，通过qrc管理样式文件。

2、创建单独的QSS文件，把这样的文件放到qrc中。

3、编写C++代码，读取QSS文件中的内容，并设置样式。

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

在 Qt Designer中直接集成了这样的功能，允许我们把样式直接写到.ui文件里。

通过这里就可以编写界面的样式了，这里进行的修改都会记录到ui文件中，并且在程序运行时会自动生效。而且这里还能进行预览。

记录了当前编辑的样式，后续Qt根据ui文件生成C++代码，也就会同时把样式设置进去。

选中控件也是可以进行设置样式的。

由于设置样式太灵活，有很多地方都能设置，就导致当某个控件样式不符合预期的时候，排查起来就比较麻烦了。全局样式，指定控件的样式，指定控件的父控件的样式，QSS文件中的样式，ui文件中的样式。实际开发中，如果需要设置样式，建议最好统一使用某一种方式来设置。

三、选择器

类型选择器，类选择器。全局选择器

代码：

类型选择器对子类会生效，相同的类都会被选中

类选择器不会对子类生效。

在开发中，期望不同的控件样式不同，此时就需要使用id选择器了。id是唯一的。

当类选择器和id选择器选中同一个控件的时候，并且设置的样式是冲突的，此时id选择器的优先级更高。

并集选择器：也可以写成ID选择器

子控件选择器

含有子控件的控件：QSpinBox，QComboBox下拉框。

代码：

伪类选择器

前面介绍的选择器，都是选中控件，伪类选择器，选中的是控件的状态。符合一定状态条件的控件。

以上选择器还可以通过！取反。

代码：

这些功能也可以通过事件来书写。

四、盒子模型

box model盒子模型，来自于CSS

符合属性 margin可以拆成四个属性，margin-left,margin-right,margin-top,margin-bottom。

padding也是可以拆分成四个属性的。

代码：

 给按钮设置样式

给复选框设置样式

给输入框设置样式

给列表框设置样式

渐变色的使用方法

给菜单设置样式

实现登录界面

直观想法，是直接给QWidget顶层窗口设置背景图。但是Qt中存在限制，直接给顶层窗口设置背景会失效。暂时不知道为什么要这样。没有具体的解释。可以给上述控件外头套上一个和窗口大小一样大QFrame控件。

QSS小结

1、QSS是什么

2、QSS基本用法

3、选择器的使用

4、子控件选择器

5、伪类选择器

6、盒子模型

7、代码例子。QSS支持的样式属性值是很多的。

五、绘图API

绘图画画，前面学习Qt主要是学Qt的各种控件 =》本质上都是画出来的。都是一些常用的东西，Qt已经提前画好了，拿过来就能使用。实际开发中，很可能现有的控件无法满足要求，就需要自己diy一些控件，Qt提供的绘图API就是为了解决上述问题的。实际开发中大部分情况下不需要使用绘图API，

绘图API核心类

QPainter，提供一系列的绘图方法，实现会话的动作

QPaintDevice，你要画的内容是往啥东西上画的，也就是画板。QWidget就是QPaintDevice的子类。

QPen 画笔 。设置画图的线条属性。

QBrush 画刷 设置画图的填充属性。

一个关键的注意事项，画图相关的操作，一般不会放到QWidget的构造函数中调用执行，而是Qt提供了一个paintEvent事件处理函数，在这里进行调用。和paintEvent和它的对应的会有一个QPaintEvent事件，

1、控件首次创建的时候，比如往QWidget上画画，QWidget创建之前，画的东西当然不生效。首次创建QWidget就能显示出画的东西来。

2、控件被遮挡，在解除遮挡。这个时机进行绘制也是很重要的，否则绘制的内容就会被遮挡之后就没了。

3、窗口被最小化，再还原。

4、控件大小发生改变的时候

5、主动在代码中调用repaint或者update触发事件（都是QWidget提供的成员函数）。

绘制各种形状

绘制文字

0横坐标，表示的是文字最左侧的位置。

100纵坐标，表示的是文字的基线位置

通过画笔对象QPen设置绘制的形状的颜色信息

QBrush画刷

设置颜色和风格

可以设置的风格

具体的使用

绘制图片

QPixmap通过这个类，就可以表示一个图片。

图片的旋转

QPainter对象进行了旋转，绘制出来的内容也就产生了旋转了。

是绕着0，0坐标系原点进行了旋转。为了让图片显示出来，可以把坐标系原点（Painter的起点）平移一下。比如可以平移到窗口右下角。

Qt就告一段落了！祝我们可以找到心仪的工作。在计算机的道路上走得更远。