基于qt和css的MP3音乐播放器引擎开发

1

QMainWindow:

QMainWindow 是用于创建应用程序主窗口的类。它通常用于具有菜单栏、工具栏、状态栏等标准组件的窗口。

QMainWindow 提供了一种框架,用于组织和管理应用程序的用户界面元素。它可以包含其他小部件(widgets)和布局管理器(layout managers),如中心部件(central widget)、dock 窗口(dock widgets)等。

QDialog:

QDialog 是一个对话框窗口的基类。对话框通常用于临时交互,例如消息框、文件对话框、设置对话框等。

QDialog 提供了对话框的标准外观和行为,包括窗口标题、按钮、标签等。它可以用于创建自定义对话框,也可以用作其他对话框类的基类。

QWidget:

QWidget 是 Qt 中所有用户界面组件的基类。它提供了绘制、事件处理、布局等功能,是其他所有用户界面组件的基础。

QWidget 可以独立存在,也可以嵌入到其他容器中,如窗口、对话框、布局等。它是所有可视化组件的基础,包括按钮、文本框、标签等。

总的来说,QMainWindow 用于创建主窗口应用程序,QDialog 用于创建对话框窗口,而 QWidget 则是所有用户界面组件的基类,可以用于创建各种自定义的用户界面元素。

2

QPaintEvent是Qt框架中的一个事件类,用于绘制部件(widget)的内容。当一个部件需要重新绘制自己时,通常会触发一个QPaintEvent事件。

在处理QPaintEvent时,通常会在部件的绘制事件处理函数中进行绘制操作。这通常是在部件类的paintEvent函数中完成的,例如:

cpp 复制代码
void MyWidget::paintEvent(QPaintEvent *event) {
    // 在这里进行绘制操作
}

在paintEvent函数中,您可以使用Qt提供的绘制工具(如QPainter)来绘制各种图形、文本和图像等内容。您可以在部件的绘制区域上绘制任何您想要的内容,以实现自定义的绘制效果。

例如,以下是一个简单的例子,演示了如何在部件的绘制区域上绘制一个矩形:

cpp 复制代码
void MyWidget::paintEvent(QPaintEvent *event) {
    // 创建绘图对象
    QPainter painter(this);
    
    // 设置画笔和画刷
    painter.setPen(Qt::black);
    painter.setBrush(Qt::red);
    
    // 绘制矩形
    painter.drawRect(10, 10, 100, 100);
}

在这个例子中,我们在部件的绘制区域上绘制了一个红色矩形,左上角坐标为(10, 10),宽度为100,高度为100。

通过处理QPaintEvent事件,并在paintEvent函数中进行绘制操作,可以实现自定义的绘制效果,以满足需求。

3

cpp 复制代码
qPainter.drawPixmap(0,0,width(),height(),QPixmap(":/new/prefix1/ResImages/MBGMusicplayer_ui2.jpg"));

让我们逐步解释这行代码的含义:

qPainter: 这是一个QPainter对象,用于在绘制设备上进行绘制操作。

drawPixmap: 这是QPainter类的一个方法,用于在绘图设备上绘制一个图像。

(0, 0): 这是要绘制图像的起始坐标,通常是左上角的坐标。

width(): 这是调用该代码的部件(可能是窗口或其他部件)的宽度。width()方法返回部件的宽度。

height(): 这是调用该代码的部件的高度。height()方法返回部件的高度。

QPixmap(":/new/prefix1/ResImages/MBGMusicplayer_ui2.jpg"): 这是要绘制的图像。QPixmap类表示一个图像,(":/new/prefix1/ResImages/MBGMusicplayer_ui2.jpg")是图像文件的路径(可能是Qt资源文件路径),通过该路径加载图像。

因此,这行代码的作用是在调用该代码的部件上绘制指定路径的图像,起始坐标为(0, 0),绘制的大小与部件的大小相匹配。

cpp 复制代码
QPainter qPainter(this);

通过将this传递给QPainter构造函数,您告诉Qt将绘图操作应用于当前的部件,即MainWindow

4

styleSheet

设置透明背景

font-size:14px;

color: rgb(255,255,255);

background-color: rgba(255,255,255,50);

这组CSS规则是用于设置按钮的样式,其中包括文字大小、文字颜色和背景颜色。让我解释一下每个属性的含义:

font-size: 14px;: 这指定了按钮文本的字体大小为14像素。

color: rgb(255, 255, 255);: 这指定了按钮文本的颜色为白色。使用了RGB表示法,RGB(255, 255, 255)代表白色。

background-color: rgba(255, 255, 255, 50);: 这指定了按钮的背景颜色为白色,同时设置了透明度为50%。这里使用了RGBA表示法,其中A代表Alpha通道,控制了颜色的透明度。RGBA(255, 255, 255, 50)表示白色并且透明度为50%。

请注意,透明度值介于0和255之间,0代表完全透明,255代表完全不透明。因此,50%的透明度对应的值是约127(255的一半)

5

控件透明化

styleSheet

QPushButton{

background-repeat:no-repeat;

background-position:center center;

border:none;

color:white;

}

QPushButton:hover{

background-repeat:no-repeat;

background-position:center center;

}

QPushButton:press{

background-repeat:no-repeat;

background-position:center center;

}

提供的是一组用于设置QPushButton样式的CSS规则。让我逐一解释它们:

QPushButton: 这是用于设置QPushButton默认状态的样式规则。它会影响所有普通状态下的QPushButton。

background-repeat: no-repeat;: 这指定了背景图像不应重复。

background-position: center center;: 这将背景图像定位于按钮的中心。

border: none;: 这指定了按钮的边框样式为无。

color: white;: 这指定了按钮文本的颜色为白色。

QPushButton:hover: 这是用于设置QPushButton在鼠标悬停时的样式规则。它会影响按钮在鼠标悬停时的外观。

background-repeat: no-repeat;: 这指定了背景图像不应重复。

background-position: center center;: 这将背景图像定位于按钮的中心。

QPushButton:press: 这是用于设置QPushButton在按下时的样式规则。它会影响按钮在按下时的外观。

background-repeat: no-repeat;: 这指定了背景图像不应重复。

background-position: center center;: 这将背景图像定位于按钮的中心。

6

定时器去边框

lineWidth调成0

groupbox白色

QGroupBox

{

font-size:14px;

color:white

}

7

这段代码是用于设置两个水平滑动条(horizontalSlider_PlayProgress 和 horizontalSlider_Volume)的样式。让我解释一下每个部分的含义:

QSlider::groove:horizontal: 这部分定义了滑动条轨道的样式,包括边框、背景颜色、高度和边框半径等。

QSlider::handle:horizontal: 这部分定义了滑块的样式,包括背景渐变、宽度、边框半径以及上下的边距。

horizontalSlider::sub-page:horizontal: 这部分定义了滑动条已填充部分的样式,包括背景颜色、边距和边框半径。

在这段代码中,滑动条轨道和滑块的样式设置是相同的,都是蓝色边框和蓝色背景,而滑块使用了径向渐变作为背景。已填充部分的样式为红色背景。

说明每个部分的作用:

cpp 复制代码
ui->horizontalSlider_PlayProgress->setStyleSheet(

这行代码开始设置水平滑动条 horizontalSlider_PlayProgress 的样式。

cpp 复制代码
"QSlider::groove:horizontal {"
"border:1px solid skyblue;"
"background-color:skyblue;"
"height:10px;"
"border-radius:5px;"
"}"

这段代码定义了滑动条轨道的样式。具体来说:

border:1px solid skyblue;:设置轨道的边框为1像素宽的天蓝色。

background-color:skyblue;:设置轨道的背景颜色为天蓝色。

height:10px;:设置轨道的高度为10像素。

border-radius:5px;:设置轨道的边框半径为5像素,使其呈现圆角。

cpp 复制代码
"QSlider::handle:horizontal {"
"background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.7 white,stop:0.8 rgb(140,212,255));"
"width:20px;"
"border-radius:10px;"
"margin-top:-5px;"
"margin-bottom:-5px;"
"}"

这段代码定义了滑块的样式。具体来说:

background:qradialgradient(...);:设置了一个径向渐变作为滑块的背景,其中渐变从0.7位置的白色到0.8位置的RGB(140,212,255)。这个渐变将会形成滑块的视觉效果。

width:20px;:设置滑块的宽度为20像素。

border-radius:10px;:设置滑块的边框半径为10像素,使其呈现圆角。

margin-top:-5px; 和 margin-bottom:-5px;:这两行代码将滑块的上下外边距都设置为-5像素,用于垂直居中滑块。

cpp 复制代码
"horizontalSlider::sub-page:horizontal{"
"background:red;"
"margin:5px;"
"border-radius:5px;"
"}"

这段代码定义了已填充部分的样式。具体来说:

background:red;:设置已填充部分的背景颜色为红色。

margin:5px;:设置已填充部分的外边距为5像素,用于与轨道之间的间距。

border-radius:5px;:设置已填充部分的边框半径为5像素,使其呈现圆角。

相关推荐
qh0526wy几秒前
pyqt5冻结+分页表
开发语言·python·qt
小小药4 分钟前
009-spring-bean的实例化流程
java·数据库·spring
Amo 672926 分钟前
css 编写注意-1-命名约定
前端·css
DashVector27 分钟前
如何通过HTTP API插入或更新Doc
大数据·数据库·数据仓库·人工智能·http·数据库架构·向量检索
hac132230 分钟前
瀚高数据库
数据库
利哥AI实例探险34 分钟前
建筑工地AI安全检测系统:YOLO11数据标注训练与PyQt5界面设计应用开发
人工智能·qt·安全
小小小妮子~1 小时前
深入理解 MySQL 架构
数据库·mysql·架构
长风清留扬1 小时前
小程序开发实战项目:构建简易待办事项列表
javascript·css·微信小程序·小程序·apache
神秘代码行者1 小时前
CSS @property 属性
css
man20171 小时前
【2024最新】基于Python+Mysql+django的水果销售系统Lw+PPT
数据库·mysql·django