＜6＞, 界面优化
目录
一，QSS
1，背景介绍
2，基本语法
3，设置方式
（1）指定控件样式设置
（2）全局样式设置
（3）从文件加载样式表
（4）使用 Qt Designer 编辑样式
4，选择器
5，样式属性
6，样式示例
二，绘图
1，基本概念
2，绘制各种形状
（1）绘制线段
（2）绘制矩形
（3）绘制圆形
（4）绘制文本
（5）设置画笔
（6）设置画刷
一，QSS
1，背景介绍
在网页前端开发领域中, CSS 是一个至关重要的部分. 描述了一个网页的 "样式". 从而起到对网页美化的作用 .所谓样式, 包括不限于大小, 位置, 颜色, 背景, 间距, 字体等等网页开发作为 GUI 的典型代表, 也对于其他客戶端 GUI 开发产生了影响. Qt 也是其中之一.
Qt 仿照 CSS 的模式, 引入了 QSS, 来对 Qt 中的控件做出样式上的设定, 从而允许程序猿写出界面更好看的代码.同样受到 HTML 的影响, Qt 还引入了 QML 来描述界面, 甚至还可以直接把一个原生的 html 页面加载到界面上. 由于 Qt 本身的设计理念和网页前端还是存在一定差异的, 因此 QSS 中只能支持部分 CSS 属性.整体来说 QSS 要比 CSS 更简单一些.
2，基本语法
选择器
{属性名：属性值
}3，设置方式
（1）指定控件样式设置
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("QPushButton{color:#ffaa00}");this->setStyleSheet("QPushButton{color:red}");ui->pushButton->setStyleSheet("QPushButton { font-size: 50px;}");ui->pushButton_2->setStyleSheet("QPushButton { color: green;}");
} （2）全局样式设置
int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton { color : red; }");Widget w;w.show();return a.exec();
}（3）从文件加载样式表
#include "widget.h"#include <QApplication>
#include <QFile>QString loadQSS()
{QFile file(":/style.qss");// 打开文件file.open(QFile::ReadOnly);// 读取文件内容. 虽然 readAll 返回的是 QByteArray, // 但是 QString 提供了QByteArray 版本的构造函数.QString style = file.readAll();// 关闭文件file.close();return style;
}int main(int argc, char *argv[])
{QApplication a(argc, argv);// 调用上述函数加载样式const QString& style = loadQSS();a.setStyleSheet(style);Widget w;w.show();return a.exec();
}（4）使用 Qt Designer 编辑样式
4，选择器
| 选择器 | 示例 | 说明 |
| 全局选择器 | * | 选择所有的 widget. |
| 类型选择器 (typeselector) | QPushButton | 选择所有的 QPushButton 和 其子类 的控件. |
| 类选择器 (class selector) | .QPushButton | 选择所有的 QPushButton 的控件. 不会选择子类. |
| ID 选择器 | #pushButton_2 | 选择 objectName 为 pushButton_2 的控 件. |
| 后代选择器 | QDialog QPushButton | 选择 QDialog 的所有后代(子控件, 孙子控件等等) 中的 QPushButton. |
| 子选择器 | QDialog > QPushButton | 选择 QDialog 的所有子控件中的 QPushButton. |
| 并集选择器 | QPushButton, QLineEdit, QComboBox | 选择 QPushButton, QLineEdit, QComboBox 这三种控件. (即接下来的样式会针对这三种控件都生效). |
| 属性选择器 | QPushButton[flat="false"] | 选择所有 QPushButton 中, flat 属性为 false 的控 件. |
5，样式属性
QSS 中的样式属性非常多, 不需要都记住. 核心原则还是用到了就去查.
大部分的属性和CSS 是非常相似的.
一个遵守盒模型的控件, 由上述几个部分构成.
Content 矩形区域: 存放控件内容. 比如包含的文本/图标等.
Border 矩形区域: 控件的边框.
Padding 矩形区域: 内边距. 边框和内容之间的距离.
Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
默认情况下, 外边距, 内边距, 边框宽度都是 0.
可以通过一些 QSS 属性来设置上述的边距和边框的样式.
| QSS 属性 | 说明 |
| margin | 设置四个方向的外边距. 复合属性. |
| padding | 设置四个方向的内边距. 复合属性. |
| border-style | 设置边框样式 |
| border-width | 边框的粗细 |
| border-color | 边框的颜色 |
6，样式示例
按钮
| 属性 | 说明 |
| font-size | 设置文字⼤小. |
| border-radius | 设置圆角矩形. 数值设置的越⼤ , 角就"越圆". |
| background-color | 设置背景颜色. |
复选框
| 要点 | 说明 |
| ::indicator | 子控件选择器. 选中 checkbox 中的对钩部分. |
| :hover | 伪类选择器. 选中鼠标移动上去的状态. |
| :pressed | 伪类选择器. 选中鼠标按下的状态. |
| :checked | 伪类选择器. 选中 checkbox 被选中的状态. |
| :unchecked | 伪类选择器. 选中 checkbox 未被选中的状态. |
| width | 设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸). |
| height | 设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸). |
| image | 设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片. |
单选框
| 要点 | 说明 |
| ::indicator | 子控件选择器. |
| :hover | 伪类选择器. 选中鼠标移动上去的状态. |
| :pressed | 伪类选择器. 选中鼠标按下的状态. |
| :checked | 伪类选择器. 选中 radioButton 被选中的状态. |
| :unchecked | 伪类选择器. 选中 radioButton 未被选中的状态. |
| width | 设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸). |
| height | 设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸). |
| image | 设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片. |
二，绘图
1，基本概念
虽然 Qt 已经内置了很多的控件, 但是不能保证现有控件就可以应对所有场景，很多时候我们需要更强的 " 自定制" 能力 .Qt 提供了画图相关的 API, 可以允许我们在窗口上绘制任意的图形形状, 来完成更复杂的界面设计.
"控件" , 本质上也是通过画图的方式画上去的.画图 API 和 控件 之间的关系, 可以类比成机器指令和高级语言之间的关系.控件是对画图 API 的进一步封装; 画图 API 是控件的底层实现.
绘图 API 核心类：
| 类 | 说明 |
| QPainter | "绘画者" 或者 "画家". 用来绘图的对象, 提供了一系列 drawXXX 方法, 可以允许我们绘制各种图形. |
| QPaintDevice | "画板". 描述了 QPainter 把图形画到哪个对象上. 像咱们之前用过的 QWidget 也是一种 QPaintDevice (QWidget 是QPaintDevice 的子类) . |
| QPen | "画笔". 描述了 QPainter 画出来的线是什么样的. |
| QBrush | "画刷". 描述了 QPainter 填充一个区域是什么样的. |
2，绘制各种形状
（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：绘制终点坐标（3）绘制圆形
void QPainter::drawRect(int x, int y, int width, int height)；参数：
x：窗⼝横坐标；
y：窗⼝纵坐标；
width：所绘制矩形的宽度；
height：所绘制矩形的⾼度；（4）绘制文本
QPainter类 中不仅提供了绘制图形的功能，还可以使用 QPainter::drawText() 函数来绘制文字，也可以使用QPainter::setFont() 设置字体等信息。
（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) |
（6）设置画刷
在 Qt 中，画刷是使⽤ QBrush类 来描述，画刷⼤多⽤于填充。QBrush定义了QPainter的填充模式，具有样式、颜⾊、渐变以及纹理等属性。
设置画刷主要通过 void QPen::setBrush(const QBrush &brush) ⽅法，其参数为画刷的格式。画刷的格式中定义了填充的样式，使⽤ Qt::BrushStyle 枚举，默认值是 Qt::NoBrush，也就是不进⾏任何填充。可以通过 Qt 助⼿查找画刷的格式。
点个赞吧，哈哈！！！666