QT界面优化（6）

一、QSS了解

1.要点

QSS是仿照CSS模式的，如果CSS和QSS发生样式冲突，则QSS优先级更高！

2.语法规则

//CSS

选择器 {

属性名: 属性值;

}

//QSS（和CSS一样）

选择器 {

属性名: 属性值;

}

3.代码

cpp 复制代码

ui->pushButton->setStyleSheet("QPushButton{color:red;}");

二、QSS设置规则

1.继承性

给指定控件设置样式后，该控件的子元素 默认会继承某些样式属性（如字体、颜色等），但并非所有属性都会传递给子元素**（这个只做了解，没什么用）**。

2.全局样式

优点：

复用性高 ：使同一个样式针对多个控件生效，代码更简洁。

易于维护 ：所有控件样式内聚在一起，便于维护和问题排查。

**使用：**通过QApplication 的 setStyleSheet ⽅法设置整个程序的全局样式.

代码
cpp 复制代码
QApplication a(argc, argv);
a.setStyleSheet("QPushButton{color:red};");

3.样式层叠特性（层叠性）

概念

如果通过全局样式 给某个控件设置了属性1 ，通过指定控件样式 给同一控件设置了属性2 （且属性1与属性2不是同一个属性），那么两个属性都会生效。

代码
cpp 复制代码
QApplication a(argc, argv);
a.setStyleSheet("QPushButton{color:red};");
ui->pushButton->setStyleSheet("QPushButton{font-size:50px;}");//设置字体

4.样式优先级

概念

如果全局样式 和指定控件样式 对同一属性设置了不同的值（即发生冲突），则指定控件样式优先展示。

代码
cpp 复制代码
QApplication a(argc, argv);
a.setStyleSheet("QPushButton{color:red};");
ui->pushButton->setStyleSheet("QPushButton{color:green;}");

三、QSS设置方式

3.1 从文件加载到样式表

1.概念

上述代码都是把样式通过硬编码 的方式设置的。这样会使 QSS 代码和 C++ 代码耦合在一起，不便于代码的维护。因此更好的做法是把样式放到单独的文件 中，然后通过读取文件的方式来加载样式。

2.要求

需要创建.qss文件，然后添加到.qrc文件中，进行使用（这个问题是太复杂了）

3.代码

cpp 复制代码

//.qss
QPushButton
{
	color:red;
}

QString LoadQss()
{
    QFile file("://style.qss");//创建文件

    file.open(QFile::ReadOnly);//打开文件（以只读方式打开）

    QString style = file.readAll();//读取文件

    file.close();//关闭文件
    return style;
}
//调用加载样式
const QString& style = LoadQss();
a.setStyleSheet(style);

3.2 使用QtDesigner

1.概念

QSS 可以通过 Qt Designer 直接编辑，从而起到实时预览 的效果。这样会将样式表保存在 .ui 文件中（最终被编译到 C++ 代码中）

2.代码

四、选择器

1.介绍

重点：之前上面学的就是类型选择器

4.1 ID选择器

1.代码

4.2 并集选择器

1.代码

cpp 复制代码

QApplication a(argc, argv);
//设置全局样式
a.setStyleSheet("QPushButton,QLabel,QLineEdit{color:red;}");

4.3 子控件选择器

1.下拉框

cpp 复制代码

QApplication a(argc, argv);

//选中下拉框的下拉按钮图标
QString style = "QComboBox::down-arrow{image:url(://danta.png)}";

a.setStyleSheet(style);

2.进度条

4.4 伪类选择器（重要）

1.概念

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

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

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

使用 冒号（:） 的方式定义伪类选择器。

2.常见伪类选择器

3.代码

五、样式属性

5.1 盒子模型（Box Model）

1.介绍

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

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

2.属性

3.代码

4.边距要点：

一个值：四个方向相同
两个值：第一个值 = 上下，第二个值 = 左右
三个值 ：第一个值 = 上，第二个值 = 左右，第三个值 = 下
四个值：上、右、下、左（顺时针方向，即"指针正方向"）

cpp 复制代码

QApplication a(argc, argv);

QString str = "";

str += "QMenuBar::item:selected{background:blue}";
str += "QMenu::item:selected{background:red}";

a.setStyleSheet(str);

七、绘图

1.方法

2.方法的使用

7.1 绘制各种形状

1.绘制线段（drawLine）

cpp 复制代码

void QPainter::drawLine(
     const QPoint &p1,
     const QPoint &p2
 );

// 功能：
// 在当前 QPainter 的绘制设备上，从点 p1 到点 p2 绘制一条直线
// 使用当前的画笔（QPen）样式、宽度和颜色

// 参数说明：
// const QPoint &p1:
// 直线的起点坐标

// const QPoint &p2:
// 直线的终点坐标

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
    (void)event;

    //实例画家对象，this表示在当前窗口中进行绘画
    QPainter painter(this);

    //画一条线
    painter.drawLine(QPoint(20,20),QPoint(400,20));
    painter.drawLine(20,100,400,100);

}

2.绘制矩形

cpp 复制代码

void QPainter::drawRect(
     int x,
     int y,
     int width,
     int height
 );

// 功能：
// 在当前 QPainter 的绘制设备上，绘制一个矩形
// 使用当前的画笔（QPen）和画刷（QBrush）

// 参数说明：
// int x:
// 矩形左上角的 x 坐标

// int y:
// 矩形左上角的 y 坐标

// int width:
// 矩形的宽度

// int height:
// 矩形的高度

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
    (void)event;

    //实例画家对象，this表示在当前窗口中进行绘画
    QPainter painter(this);

    //绘制矩形
    painter.drawRect(200,200,200,50);

}

3.绘制圆形

cpp 复制代码

void QPainter::drawEllipse(
     const QPoint &center,
     int rx,
     int ry
 );

// 功能：
// 以 center 为中心点，rx 为水平半径，ry 为垂直半径绘制椭圆

// 参数说明：
// const QPoint &center:
// 椭圆的中心点坐标

// int rx:
// 椭圆的水平半径

// int ry:
// 椭圆的垂直半径

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
    (void)event;

    //实例画家对象，this表示在当前窗口中进行绘画
    QPainter painter(this);

    //绘制圆形
    painter.drawEllipse(QPoint(100,100),50,50);
    painter.drawEllipse(QPoint(100,100),60,40);

}

4.绘制文本

cpp 复制代码

void QPainter::drawText(
     const QPoint &position,
     const QString &text
);

// 功能：
// 在当前 QPainter 的绘制设备上，从指定的位置开始绘制文本
// 使用当前的画笔（QPen）颜色和字体（QFont）

// 参数说明：
// const QPoint &position:
// 文本绘制起点坐标（通常为文本左下角或左上角，取决于对齐方式）

// const QString &text:
// 要绘制的文本内容

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
    (void)event;

    //实例画家对象，this表示在当前窗口中进行绘画
    QPainter painter(this);

    painter.drawText(QPoint(400,200),"天行健，君子以自强不息（上）");
    painter.drawText(QPoint(400,300),"天行健，君子以自强不息（下）");
}

7.2 设置画笔

1.方法

Open

cpp 复制代码

QPen::QPen(
     const QColor &color
 );

// 功能：
// 构造一个 QPen 对象，使用指定的颜色

// 参数说明：
// const QColor &color:
// 画笔的颜色

setWidth

cpp 复制代码

void QPen::setWidth(
     int width
 );

// 功能：
// 设置画笔的宽度（单位：像素）

// 参数说明：
// int width:

setStyle

cpp 复制代码

void QPen::setStyle(
     Qt::PenStyle style
 );

// 功能：
// 设置画笔的线型样式（即线条的绘制模式）
// 支持实线、虚线、点线等样式

// 参数说明：
// Qt::PenStyle style:
// 线型样式枚举值，常用值包括：
// - Qt::SolidLine：实线
// - Qt::DashLine：虚线（短横线）
// - Qt::DotLine：点线
// - Qt::DashDotLine：虚线和点交替
// - Qt::DashDotDotLine：虚线、点、点交替
// - Qt::NoPen：无线条（不绘制边框或轮廓）

2.代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
   (void)event;

   //实例画家对象，this表示在当前窗口中进行绘画
   QPainter painter(this);

   //实例化画笔
   QPen pen(Qt::red);//红笔
   pen.setWidth(5);
   pen.setStyle(Qt::DashLine);//虚线

   //让画家使用画笔
   painter.setPen(pen);

   //画一条线
   painter.drawLine(QPoint(20,20),QPoint(400,20));
}

7.3 设置画刷

1.了解画刷

在 Qt 中，画刷是使用 QBrush 类来描述，画刷大多用于填充。QBrush 定义了 QPainter 的填充模式，具有样式、颜色、渐变以及纹理等属性。
画刷的格式中定义了填充的样式，使用 Qt::BrushStyle 枚举，默认值是 Qt::NoBrush ，也就是不进行填充。

cpp 复制代码

QBrush::QBrush(
     Qt::GlobalColor color
 );

// 功能：
// 构造一个 QBrush 对象，使用预定义的 Qt 全局颜色

// 参数说明：
// Qt::GlobalColor color:

2.画刷格式

3.代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
   (void)event;

   //实例画家对象，this表示在当前窗口中进行绘画
   QPainter painter(this);

   //实例化画刷
   QBrush brush(Qt::red);

   brush.setStyle(Qt::Dense1Pattern);

   //让画家使用画刷
   painter.setBrush(brush);

   //绘制一个圆
   painter.drawEllipse(QPoint(100,100),60,40);
}

7.4 绘制图片

1.方法

drawPixmap

cpp 复制代码

void QPainter::drawPixmap(
     int x,
     int y,
     int width,
     int height,
     const QPixmap &pixmap
 );

// 功能：
// 将 QPixmap 图像缩放到指定宽度和高度，并在 (x, y) 位置绘制
// 等价于 drawPixmap(QRect(x, y, width, height), pixmap)

// 参数说明：
// int x:
// 目标矩形左上角的 x 坐标

// int y:
// 目标矩形左上角的 y 坐标

// int width:
// 目标矩形的宽度

// int height:
// 目标矩形的高度

// const QPixmap &pixmap:
// 要绘制的 QPixmap 图像对象

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
   (void)event;

   //实例画家对象，this表示在当前窗口中进行绘画
   QPainter painter(this);

   painter.drawPixmap(100,200,100,100,QPixmap("://cake.png"));
}

translate（坐标系平移）

cpp 复制代码

void QPainter::translate(
     qreal dx,
     qreal dy
 );

// 功能：
// 将当前的坐标系原点平移指定的偏移量（浮点精度）
// 平移后，后续的绘图操作将使用新的坐标系

// 参数说明：
// qreal dx:
// x 方向上的平移量

// qreal dy:
// y 方向上的平移量

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
   (void)event;

   //实例画家对象，this表示在当前窗口中进行绘画
   QPainter painter(this);

   painter.drawPixmap(100,200,100,100,QPixmap("://cake.png"));

   painter.translate(100,100);//平移

   painter.drawPixmap(100,200,100,100,QPixmap("://cake.png"));
}

rotate（坐标系旋转）

cpp 复制代码

void QPainter::rotate(
    qreal angle
 );

// 功能：
// 将当前的坐标系绕原点顺时针旋转指定的角度（单位：度）
// 旋转后，后续的绘图操作将基于旋转后的坐标系进行

// 参数说明：
// qreal angle:
// 旋转的角度（单位：度），顺时针方向为正值

重点： 旋转后，沿箭头方向 为坐标轴正方向 ，反之为负方向。但需要注意：旋转改变的只是逻辑坐标系 （即 x、y 轴的方向），画板本身并未发生物理旋转（例如绘制的图像不会自动旋转，需要重新绘制）。

代码

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent* event)
{
   (void)event;

   //实例画家对象，this表示在当前窗口中进行绘画
   QPainter painter(this);

   painter.drawPixmap(100,200,100,100,QPixmap("://cake.png"));

   painter.rotate(180);

   painter.drawPixmap(-200,-200,100,100,QPixmap("://cake.png"));
}

save

cpp 复制代码

void QPainter::save();

// 功能：
// 保存当前 QPainter 的状态到一个内部栈中
// 保存的状态包括：变换矩阵（平移、旋转、缩放等）、画笔（QPen）、画刷（QBrush）、等

restore

cpp 复制代码

void QPainter::restore();

// 功能：
// 从内部栈中恢复最近一次由 save() 保存的 QPainter 状态
// 恢复的状态包括：变换矩阵、画笔、画刷、等
// 如果栈为空，则调用 restore() 不会产生任何效果