＜6＞, 界面优化

article/2025/7/1 18:44:15

目录

一，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


http://www.hkcw.cn/article/aHsfoKdFcq.shtml

相关文章

截图工具 Snipaste V2.10.7(2025.06.2更新)

截图工具 Snipaste V2.10.7(2025.06.2更新)

—————【下 载 地 址】——————— 【​本章下载一】&#xff1a;https://pan.xunlei.com/s/VORklK9hcuoI6n_qgx25jSq2A1?pwde7bi# 【​本章下载二】&#xff1a;https://pan.quark.cn/s/7c62f8f86735 【百款黑科技】&#xff1a;https://ucnygalh6wle.feishu.cn/wiki/…
阅读更多...
Docker安装Redis集群（3主3从+动态扩容、缩容）保姆级教程含踩坑及安装中遇到的问题解决

Docker安装Redis集群（3主3从+动态扩容、缩容）保姆级教程含踩坑及安装中遇到的问题解决

前言 部署集群前&#xff0c;我们需要先掌握Redis分布式存储的核心算法。了解这些算法能帮助我们在实际工作中做出合理选择&#xff0c;同时清晰认识各方案的优缺点。 一、分布式存储算法 我们通过一道大厂面试题来进行阐述。 如下&#xff1a;1-2亿条数据需要缓存&#xff…
阅读更多...
Altium Disigner（16.1）学习-元器件封装

Altium Disigner（16.1）学习-元器件封装

一、元器件封装 封装就是给画的原理图所有的器件的外形描述出来&#xff08;几个引脚啦、引脚之间的长度啦、宽度啦&#xff09;&#xff0c;一定要精确。否则等到真正元器件焊在板子上的时候&#xff0c;会发现根本焊不上去&#xff0c;可能就是焊盘的位置不够精确。 可以点击…
阅读更多...
初识CSS3

初识CSS3

1. 什么是CSS <style>标签 行内样式 内部样式表 外部样式表⭐ CSS样式优先级⭐ 2. CSS3基本选择器 标签选择器 类选择器 ID选择器 基本选择器的特点⭐ 基本选择器的优先级⭐ 3. CSS3高级选择器-层次选择器 后代选择器 子选择器 相邻兄弟选择器 通用兄弟选择器 4. CSS3高级…
阅读更多...
Python训练营---Day43

Python训练营---Day43

DAY 43 复习日 作业&#xff1a; kaggle找到一个图像数据集&#xff0c;用cnn网络进行训练并且用grad-cam做可视化 进阶&#xff1a;并拆分成多个文件 数据集来源水母图像数据集 --- Jellyfish Image Dataset&#xff0c;对水母图片进行分类&#xff0c;共6个类别。 数据集文件…
阅读更多...
NLP学习路线图（十八）：Word2Vec (CBOW Skip-gram)

NLP学习路线图（十八）：Word2Vec (CBOW Skip-gram)

自然语言处理&#xff08;NLP&#xff09;的核心挑战在于让机器“理解”人类语言。传统方法依赖独热编码&#xff08;One-hot Encoding&#xff09; 表示单词&#xff0c;但它存在严重缺陷&#xff1a;每个单词被视为孤立的符号&#xff0c;无法捕捉词义关联&#xff08;如“国…
阅读更多...
win32相关（事件）

win32相关（事件）

事件 什么是事件&#xff1f; 事件是指系统或应用程序中发生的特定动作或状态变化&#xff0c;这些动作或变化可以被程序检测并响应。Windows 采用事件驱动的编程模型&#xff0c;应用程序主要通过处理各种事件来与用户交互 我们来看一下事件的函数 HANDLE CreateEventW(LPSE…
阅读更多...
VisionPro项目记录3 —— 圆心距

VisionPro项目记录3 —— 圆心距

简介&#xff1a;本项目实现基于Cognex视觉系统的两圆心对位功能&#xff0c;使用一个圆作为基准&#xff0c;另一个圆进行补偿&#xff0c;输出偏移值给PLC或机械手。 系统采用CogFindCircleTool定位两圆心坐标&#xff0c;通过脚本计算圆心距并乘以缩放系数kValue&#xff0…
阅读更多...
面向连接的运输：TCP

面向连接的运输：TCP

目录 TCP连接 TCP报文段结构 往返时间估计与超时 可靠数据传输 回退N步or超时重传 超时间隔加倍 快速重传 流量控制 TCP连接管理 三次握手 1. 客户端 → 服务器&#xff1a;SYN 包 2. 服务器 → 客户端&#xff1a;SYNACK 包 3. 客户端 → 服务器&#xff1a;AC…
阅读更多...
使用Python进行函数作画

使用Python进行函数作画

前言 因为之前通过deepseek绘制一下卡通的人物根本就不像&#xff0c;又想起来之前又大佬通过函数绘制了一些图像&#xff0c;想着能不能用Python来实现&#xff0c;结果发现可以&#xff0c;不过一些细节还是需要自己调整&#xff0c;deepseek整体的框架是没有问题&#xff0…
阅读更多...
C#项目07-二维数组的随机创建

C#项目07-二维数组的随机创建

实现需求 创建二维数组&#xff0c;数组的列和宽为随机&#xff0c;数组内的数也是随机 知识点 1、Random类 Public Random rd new Random(); int Num_Int rd.Next(1, 100);2、数组上下限。 //定义数组 int[] G_Array new int[1,2,3,4];//一维数组 int[,] G_Array_T …
阅读更多...
java Semaphore‌

java Semaphore‌

Java Semaphore 用于控制同时访问特定资源的线程数量&#xff0c;通过管理一组“许可”&#xff08;permits&#xff09;实现并发限制。 模拟6人上厕所&#xff0c;但只有两个坑位&#xff0c;测试代码&#xff1a; import java.util.concurrent.Semaphore;// 假设厕所只有俩…
阅读更多...
代码随想录算法训练营第60期第五十五天打卡

代码随想录算法训练营第60期第五十五天打卡

大家好&#xff0c;我们今天继续我们图论的部分&#xff0c;其实我们昨天是主要讲解了深搜与广搜的理论基础&#xff0c;我们大体上了解了两种算法的差异与适用情景&#xff0c;今天我们就继续我们的图论的章节&#xff0c;以后几天的题目是图论中比较有名的问题叫做岛屿问题&a…
阅读更多...
【音视频】FFmpeg 编码H265

【音视频】FFmpeg 编码H265

一、概述 实现了读入本地yuv文件&#xff0c;通过libx265编码为H265格式&#xff0c;并存储到本地文件中 二、实现流程 准备文件 在build路径下准备yuv文件 在项目中添加文件参数&#xff0c;输出为h265文件&#xff0c;使用libx265编码 初始化解码器 通过传进来的libx265…
阅读更多...
贪心算法应用：带权任务间隔调度问题详解

贪心算法应用：带权任务间隔调度问题详解

贪心算法应用&#xff1a;带权任务间隔调度问题详解 贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。带权任务间隔调度问题是贪心算法的一个经典应用场景。 问题定义…
阅读更多...
Git-flow流

Git-flow流

Git git是版本控制软件&#xff0c;一般用来做代码版本控制 github是一个免费版本控制仓库是国内外很多开源项目的集中地&#xff0c;其本体是一个git服务器 Git初始化操作 git init 初始化仓库 git status 查看当前仓库的状态 git add . 将改动的文件加到暂存区 gi…
阅读更多...
LeetCode-链表操作题目

LeetCode-链表操作题目

虚拟头指针&#xff0c;在当前head的前面建立一个虚拟头指针&#xff0c;然后哪怕当前的head的val等于提供的val也能进行统一操作 203移除链表元素简单题 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(…
阅读更多...
mybatisplus的总结

mybatisplus的总结

一.通用Mapper 1.首先创建一个接口与实体类 Data TableName("user") public class User { TableId(value "id", type IdType.AUTO) private Long id; TableField("name") private String name; TableField("age") pri…
阅读更多...
UE5 创建2D角色帧动画学习笔记

UE5 创建2D角色帧动画学习笔记

UE5 创建2D角色帧动画 1.对导入的角色所有帧动画图片Apply paper2d Texture Setting 2.创建图片精灵 Create Sprite 3.全选创建的图片精灵&#xff0c;右键点击 Create Flipbook(创建图像序列视图) 4.双击此paper Flipbook 即可预览该角色帧动画 UE5 2D角色帧动画 Frames P…
阅读更多...
MyBatisPlus--条件构造器及自定义SQL详解

MyBatisPlus--条件构造器及自定义SQL详解

条件构造器 在前面学习快速入门的时候&#xff0c;练习的增删改查都是基于id去执行的&#xff0c;但是在实际开发业务中&#xff0c;增删改查的条件往往是比较复杂的&#xff0c;因此MyBatisPlus就提供了一个条件构造器来帮助构造复杂的条件。 MyBatisPlus支持各种复杂的wher…
阅读更多...
推荐文章

Copyright @ 2022~2023