Qt5学习模仿qq音乐播放器样式（1）

最新推荐文章于 2024-07-15 19:53:50 发布

skr爱码士

最新推荐文章于 2024-07-15 19:53:50 发布

阅读量1.8k

点赞数 4

分类专栏： Qt 文章标签：客户端 c++ qt

本文链接：https://blog.csdn.net/skrskr66/article/details/112156776

版权

Qt 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

尝试用 Qt做一些小例子才能更好的学习与使用。
看了下网上对于qq音乐的样式没有相关文章，所以慢慢模仿做一个。对于桌面应用，Qt当前更多用于工程项目的控制窗口设计。掌握基本信号与槽，函数使用和简单样式设计即可。其他就是工作业务流程，根据相关工作有不同的用法。当然我们熟知的WPS可是用Qt实现的。

说在前面，关于Qt本人是无比无奈，在Qt5的功能下，很多功能的实现比之前版本相对容易了许多，但是功能的增加必定带来许多坑。而且一个控件所使用的相关函数，信号与槽有些关于介绍或者参数是相当模糊的，需要有一个试错过程。这是对学习者是比较耗时的。
个人推荐vs(2017or2019)+qt学习，毕竟好调试。不过本人因为是mbp所以使用的QtCreater更加方便。

个人认为学习Qt最关键的地方在于对官方文档的查询，你所需要的功能可能在文档中已经通过一个函数进行了封装可以直接使用。

对于一个非常成熟的软件——QQ音乐，核心最关键的部分就是音乐文件的显示，保存与播放。紧接着是对文件进行下载，查看。再延展可观看音乐mv(在macOS里播放是弹出一个子窗口)等等。

首先是文件结构，很常规。头文件+源文件+image+qss+db

QQ音乐的我喜欢按钮内界面展示
在这里插入图片描述
相对于qt来说，可以使每一个按钮代表一个界面，这次基本完成了“我喜欢”按钮的基本功能与界面
因为icon这些小图标都是腾讯花了巨款才设计的UI，我凭借我的渣渣ps技术抠了一部分下来使用，大概有个样式。

先说明几个关键函数的使用，Qt封装的Media播放类QMediaplayer。
首先初始化QMediaPlayer与QMediaPlaylist音乐文件，通过QMediaPlaylist保存到播放列表中，之后添加文件路径

    m_pMusicPlayer = new QMediaPlayer(this);
    m_pPlayList = new QMediaPlaylist(this);
    m_pPlayList->setPlaybackMode(QMediaPlaylist::Loop);//设置播放模式
    m_pPlayList->addMedia(QUrl::fromLocalFile(""));//文件路径
    m_pMusicPlayer->setMedia(m_pPlayList);

然后调用Media播放类QMediaplayer的play()函数即可播放。

列表显示部分采用的是Model+TableView形式。这样只需要改变Model的值变化，在窗口显示也就随之变换了。
窗口的类为TableView，Model的初始化放在数据库完成建立连接之后。
这里有个巨坑的地方，设置每列的宽,tableview改变列宽必须放在this->model后面！坑死我了

    ui->musictableWidget->setModel(m_pModel);
    ui->musictableWidget->setColumnWidth(0,370);

在qq音乐中，选取音乐行是要整行选中，这里又增加了代理Delegate的方式，我参考了如下方法：
https://github.com/lowbees/Hover-entire-row-of-QTableView
该方法根据mvc模式的代理对数据项item整行hover选中
有兴趣的可以学习下。在最后会附上我的代码。

数据的存储我还是通过本地db文件通过sqlLite3和qt进行连接
QSqlDatabase是qt内部建立数据库连接的函数，有数据库相关了解就知道，还是建立连接，端口号，输入用户名密码。若不太了解，可去qt官网手册查看一下参数。

	m_pMusicDataBase = QSqlDatabase::addDatabase("QSQLITE","Localhost");
    m_pMusicDataBase.setHostName("Localhost");
    m_pMusicDataBase.setPort(3306);
    //setDatabaseName填写的是db文件的路径！！！大坑！！！
    m_pMusicDataBase.setDatabaseName("");//文件路径，可千万别写错
    m_pMusicDataBase.setUserName("root");
    m_pMusicDataBase.setPassword("123456");
    if(!m_pMusicDataBase.open())//我加了一个判断打印，不需要可以删除
    {
         qDebug()<<"Open DataBase Failed!"<<endl;
         return;
    }
    else
    {
        qDebug()<<"Open DataBase Success!"<<endl;
    }

    m_pMusicDataBase = QSqlDatabase::database("Localhost"); //建立数据库连接
    QSqlQuery m_pMusicQuery(m_pMusicDataBase);

QSqlQuery类是对数据库操作增删查改之类，建表的话，通过各种各样的可视化数据处理都可以进行插入，这里不在多说。我的表内容为
在这里插入图片描述

这里给出一个插入数据的例子。注意只是一个例子，我的db文件与这个不同

m_pMusicQuery.exec("insert into Favoritemusic values('最初的梦想','金玟岐','歌曲合辑','02:49',1)");

然后是关于Model与数据库之间的联系，当前的做法是

	m_pModel = new QSqlTableModel(this, m_pMusicDataBase);
    m_pModel->setTable("Favoritemusic");//输入表名
    m_pModel->select();//选择全表

模型Model选择的是QSqlTableModel，并在此时进行初始化。在通过setTable和select将数据显示在tableview。

还有的是音乐播放的同时，QSlider与此同时进行播放。qt已经想到了这种情况，直接有positionChanged和durationChanged两个信号，直接设置QSlider的位置变化。
ui->favwidget就是“我喜欢”页面，我单独写了一个类，信号多发送了一步。
最后有github地址，可下载

    connect(ui->favwidget,SIGNAL(sgnPositionChanged(qint64)),this,SLOT(OnSlotUpdatePosition(qint64)));
    connect(ui->favwidget,SIGNAL(sgnDurationChanged(qint64)),this,SLOT(OnSlotDurationChanged(qint64)));

void QMusicWidget::OnSlotUpdatePosition(qint64 position)
{
    ui->playSlider->setValue(position);
}

void QMusicWidget::OnSlotDurationChanged(qint64 position)
{
    ui->playSlider->setRange(0, position);//根据播放时长来设置滑块的范围
    ui->playSlider->setEnabled(position > 0);
    ui->playSlider->setPageStep(position / 10);//以及每一步的步数
}