《QT学习第五篇:QSS美化界面与API绘图》

**前引:**Qt开发中的三个核心功能实现:1. 音频播放功能,支持.wav格式文件播放;2. QSS界面美化,详细讲解了常用属性设置和选择器使用;3. API绘图功能,包括QPainter、QPen和QBrush的使用方法。内容涵盖了属性设置、选择器分类、绘图基础操作等实用技术,为Qt界面开发和功能实现提供了完整的技术指导

目录

一、播放声音文件

二、QSS美化界面

(1)常用属性

(1)内边距

(2)外边距

(3)背景颜色

(4)背景图片

(5)背景颜色

(6)字体大小/加粗

(2)选中范围

(1)针对单个控件

(2)窗口中所有的该控件

(3)分离:主代码与QSS

(3)选择器

(1)类型选择器

(2)ID选择器

(3)并集选择器

(4)伪类选择器

三、API绘图

(1)QPainter(画家)主导

(2)QPen(画笔)

(3)QBrush(画刷)

四、提交QT项目到Gitee


一、播放声音文件

目前只支持 .wav 后缀的音频文件,通过 QSound 类完成:

(1)先在 .pro 文件后面加入多媒体模块:multimedia

(2)先将音频(.wav 后缀)文件放在 qrc 文件中,然后导入进来

(3)实例化一个 QSound 类,将音频文件弄进来,通过 play()成员函数完成播放

二、QSS美化界面

通过 QSS 去给选择器(控件)设置各种属性,可集中管理也可单一管理,格式:

cpp 复制代码
选择器 {
 属性名: 属性值; 
}
(1)常用属性
(1)内边距

解释:内边距就是这个控件的内容和它控件边框的距离

属性:padding,也可以拆分为四个小属性

padding-top、``padding-left、``padding-right、``padding-bottom

例如:

cpp 复制代码
QPushButton
{
padding:8px 10px;
}
(2)外边距

解释:外边距就是这个控件最外边框 和 控件自身边框距离,例如:

属性:margin,也可以拆分为四个小属性

margin-top、margin-left、margin``-right、margin``-bottom

例如:

cpp 复制代码
QPushButton
{
    margin:50px 50px;
}
(3)背景颜色

解释:控件背景颜色

属性:background-color

例如:

cpp 复制代码
QPushButton
{
background-color:rgb(181, 255, 42);
}
(4)背景图片

解释:控件背景图片

属性:background-image

例如:

cpp 复制代码
QPushButton
{
    background-image:url(:/dog.jpg);
}
(5)背景颜色

解释:控件背景颜色

属性:background-color

cpp 复制代码
QPushButton
{
    background-color:red;
}
(6)字体大小/加粗

解释:控件内部字体大小

属性:font-size(大小)、font-weight(加粗)

cpp 复制代码
QPushButton
{
    font-size:30px;
    font-weight: bold;
}
(2)选中范围
(1)针对单个控件

通过代码指定名称进行设置即可:

复制代码
ui->pushButton_1->setStyleSheet("QPushButton {color : red}");

第二种方法:图形化

选中某个控件->右键改变样式表->填写qss语法即可

(2)窗口中所有的该控件

第一种方法:通过 this 来设置

this 里面所有的 QPushButton 控件:

复制代码
this->setStyleSheet("QPushButton {color : red}");

第二种方法:通过 QApplication 来设置

(3)分离:主代码与QSS

在上面都是在类里面完成设置,可以将QSS的内容放在 qrc 文件中,分离实现代码的可读性:

(1)建立 qss 资源,在这个项目中新建一个 .qss 后缀的文档:

(2)然后在这个 .qss 后缀的文档中编辑文档的内容:

(3) setStyleSheet 控件的参数就是整个 qss 的字符串,所以拿到这个 .qss 文件的内容即可:

(3)选择器

选择器就是控制 qss 选中的范围,总结:

  • 如果针对具体控件:用ID(# + 名称)
  • 如果针对某类控件:用控件名称
  • 并集选择器:对前面几种可以混用,一次性设置多个
(1)类型选择器

这个范围内所有的 QPushButton 及其所有子类

语法:直接写控件名称

cpp 复制代码
QPushButton

例如:

cpp 复制代码
QPushButton 
{
    background-color: red;
    color: white;
}
(2)ID选择器

针对具体的控件

语法:# + 控件的 objectName

cpp 复制代码
#push_button_2

例如1:

cpp 复制代码
#pushButton_submit 
{
    background-color: green;
    padding: 5px 15px;
}

例如2:

(3)并集选择器

同时匹配所有列出的选择器对应的控件,可混合前面的选择器使用

语法:多个选择器用逗号 , 分隔

cpp 复制代码
QPushButton, QLineEdit, QComboBox

例如:

cpp 复制代码
QPushButton, QLineEdit, QComboBox 
{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;
}
(4)伪类选择器

伪类选择器,是根据控件所处的某个状态被选择的:

常用的伪类选择器:

语法:基础选择器(不能单独写 :hover)再用 : 拼接伪类名

例如:

cpp 复制代码
QPushButton:hover
{
  //
};
(5)事例项目

三、API绘图

在执行API绘图之前,我们都需要先完成下面两步:

(1)需要先重新 void paintEvent (QPaintEvent *event) 这个函数

(2)实例化 QPainter 类,可以选择在栈上创建

(1)QPainter(画家)主导

对于基本的图行绘画,我们可以直接完成:

drawRect:画矩形(x,y,宽,高)

drawEllipse:画椭圆(x,y,宽,高)

drawLine:画直线(x1,y1,x2,y2)

drawText:写一个文本(x,y,文本)。可以先通过QFont设置字体,参考如下

drawPimap:设置一个图片(x,y,图片)

例如:

设置字体后:

设置图片后:

(2)QPen(画笔)

这里比较推荐一键基础构造:QPen pen(颜色, 线宽, 线型),然后给画家设置画笔

例如:

(3)QBrush(画刷)

这里比较推荐一键基础构造:QBrush brush(颜色,填充模式),然后给画家设置画刷

例如:

(4)事例项目(工作证)
相关推荐
无忧.芙桃1 小时前
数据结构之栈
c语言·开发语言·数据结构
wyhwust1 小时前
web应用技术--springboot01
java·开发语言
焦虑的说说1 小时前
mysql深分页性能瓶颈根源分析
数据库·mysql
想你依然心痛1 小时前
数据库技术在电力业务中的核心应用场景
java·开发语言·数据库
数智工坊1 小时前
周志华《Machine Learning》学习笔记--第十六章--强化学习
笔记·学习·机器学习
weixin_523185321 小时前
达梦数据库事务机制踩坑:默认不自动提交事务
数据库·oracle
ChindongX1 小时前
笔记:解决窗口透明度不生效问题 —— QGraphicsOpacityEffect 的使用
笔记·qt
小陈phd1 小时前
Qdrant 向量数据库从入门到实战:构建高效语义检索系统
数据库
知南x1 小时前
【DPDK例程学习】(1) helloworld
学习·word