c++在线音乐播放器项目开发记录(1)
文章目录
- 前言
- 1.项目的创建流程
- 2.项目的总体结构
- 3.更改页面背景并添加按钮
- 4.改变按钮颜色
- 5.鼠标拖动窗口
- 6.添加About界面
前言
因为放寒假了，时间比较短，想找实习也不好找，干脆在家加强一下技术栈，首先从c++学起，最适合练手的就是qt的项目了，我是根据B站视频【5个C/C++硬核简历项目实战，可直接写入简历，包含：Qt项目、音视频流媒体开发、后端开发、DPDK网络编程、KV存储、Linux内核。总有一个实战项目适合你！】来进行学习的，这篇文章主要是记录一下在跟视频做的过程中，自己的学习体会和问题的解决思路。
项目已上传至Github:https://github.com/MengFanjun020906/OnlineMusic
1.项目的创建流程
按照默认往下创建，执行到选择开发套件这一步骤时，在这里我遇到的问题是，在选则开发套件(Kit)的时候并未出现MSVC2019这一选项，都是灰的，解决方案就是重新安装QT，在安装时需要选择用户自定义安装，并且勾选上MSVC2019。
2.项目的总体结构
项目的总体结构如下：
- OnlineMusic.pro:项目管理文件，记录项目的一些配置以及项目包含文件的组织管理
- onlinemusicwidget.h:项目的头文件，这个头文件定义了一个名为OnlineMusicWidget的类，它继承自QMainWindow，使用了 Qt 的元对象系统，并且包含了一个指向自动生成的 UI 类的指针ui，用于操作用户界面元素
#ifndef ONLINEMUSICWIDGET_H
#define ONLINEMUSICWIDGET_H
#include <QMainWindow>
QT_BEGIN_NAMESPACE
namespace Ui {
class OnlineMusicWidget;
}
QT_END_NAMESPACE
class OnlineMusicWidget : public QMainWindow
{
Q_OBJECT
public:
OnlineMusicWidget(QWidget *parent = nullptr);
~OnlineMusicWidget();
private:
Ui::OnlineMusicWidget *ui;
};
#endif // ONLINEMUSICWIDGET_H
- main.cpp：程序的主要启动文件
#include "onlinemusicwidget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
OnlineMusicWidget w;
w.show();
return a.exec();
}
- onlinemusicwidget.cpp：段代码是 OnlineMusicWidget 类的实现部分，包含了构造函数和析构函数。构造函数负责创建 OnlineMusicWidget 对象，将其初始化为 QMainWindow 的子类，创建用户界面元素，并将它们设置到窗口中。析构函数则负责在对象销毁时释放为 ui 指针分配的内存，确保资源的正确释放，避免内存泄漏。这个类可以作为一个自定义的主窗口，用于显示在线音乐的用户界面。
#include "onlinemusicwidget.h"
#include "ui_onlinemusicwidget.h"
OnlineMusicWidget::OnlineMusicWidget(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::OnlineMusicWidget)
{
ui->setupUi(this);
}
OnlineMusicWidget::~OnlineMusicWidget()
{
delete ui;
}
- 资源：可以自己导入的图片资源等
3.更改页面背景并添加按钮
在onlinemusicwidget.h中添加修改背景画布的函数，在头文件中添加后，才能在cpp文件中编写函数的具体功能。
public:
OnlineMusicWidget(QWidget *parent = nullptr);
~OnlineMusicWidget();
//处理播放器背景画布
void paintEvent(QPaintEvent *event);
onlinemusicwidget.cpp添加更改背景画布的主要函数，要注意在void后添加类名 OnlineMusicWidget
void OnlineMusicWidget:: paintEvent(QPaintEvent *event)
{
QPainter painter(this);
//更改背景图片
painter.drawPixmap(0,0,width(),height(),QPixmap(":/new/prefix1/Images/musicplayer_ui.png"));
}
更改完背景，可以添加按钮了，先添加右上角的功能按钮，分别是：最小化、切换UI、关闭。从右侧拖Push Button出来，然后在左下角的属性编辑器中更改其属性，例如按钮大小、图标大小等,最后将3个按钮选中，选择水平布局。
4.改变按钮颜色
通过属性编辑器中的stylesheet来设置按钮的背景颜色为透明
QPushButton
{
border-radius:0px;
background-image:url(:/image/image/image/quit.png);
background-repeat:np-repeat;
border:none;
background-positio:center center;
}
具体设计整个页面之后，呈现的效果如下。
5.鼠标拖动窗口
在头文件中放入这3个函数的声明
protected:
// 鼠标拖动窗口实现移动
void mouseMoveEvent(QMouseEvent *et);//移动事件
void mousePressEvent(QMouseEvent *et);//按住事件
void mouseReleaseEvent(QMouseEvent *et);//释放时间
因为做的页面是不能拖动的，所以要加上鼠标拖动窗口的代码。
void OnlineMusicWidget::mouseMoveEvent(QMouseEvent *et)
{
if(mousepress)
{
QPoint movePos=et->globalPos();//窗口初始位置
move(movePos-movepoint);
}
}
void OnlineMusicWidget::mousePressEvent(QMouseEvent *et)
{
if(et->button()==Qt::LeftButton)
{
mousepress=true;
}
// 窗口移动距离
movepoint=et->globalPos()-pos();
}
void OnlineMusicWidget::mouseReleaseEvent(QMouseEvent *et)
{
Q_UNUSED(et);
mousepress=false;
}
功能说明：movepoint = et->globalPos() - pos();：计算鼠标按下时鼠标相对于窗口左上角的偏移量。
et->globalPos() 获取鼠标按下时的全局位置。
pos() 获取窗口当前的位置（相对于其父窗口或屏幕左上角）。
两者相减得到偏移量 movepoint，存储起来以便在鼠标移动事件中使用。
当用户按下鼠标左键时（mousePressEvent），会记录鼠标相对于窗口左上角的偏移量，并设置 mousepress 为 true。
当用户移动鼠标时（mouseMoveEvent），如果 mousepress 为 true，根据鼠标的当前位置和之前计算的偏移量移动窗口。
当用户释放鼠标时（mouseReleaseEvent），将 mousepress 置为 false，结束拖动操作。
6.添加About界面
在头文件下添加设计师类，然后在About按钮下添加启动的代码
void OnlineMusicWidget::on_pushButton_About_clicked()
{
AboutDialog *pAboutDialogs=new AboutDialog(this);
pAboutDialogs->exec();
}
点击About按钮会弹出一个新界面。