Qt5学习模仿qq音乐播放器样式（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);//以及每一步的步数
}

基本我觉得比较麻烦的地方做出了一些说明。因为使用的是Qss，所以真正麻烦的是样式改正，得不停的去尝试，好在目前试出了一个比较接近的。

代码github地址为
https://github.com/skrskr66/QtWork
代码仅供参考，而且不用多想，肯定是编译不过的，图片路径得替换，在加上可能其他环境报错。有兴趣的小伙伴可以看看学习。

当前只是初步完成一些样式与基本功能，关于数据库连接显示那块是一定需要再进行修改，因为添加了新的数据还没有函数实现，本地音乐文件如何与数据库保持相关连可能也需要对表进行重新设计。所以先写一部分进行记录并对自己进行鞭策。

冲！

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

Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
QQ音乐播放器部分笔记
QQ音乐播放器案例 1. 基本结构分析三个部分: 头部区域中间内容区左边歌曲列表信息上边按钮工具条和下边的滑动列表[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img- ...
从零玩转jQuery之项目开发（QQ音乐播放器）
QQ音乐播放器项目大体效果如下: HTML结构分析: 一.页面布局 1.首先来看下HTML大体结构: <div class="header"></div> ...
html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
QQ音乐播放器-jQuery实现
QQ音乐播放器案例展示案例实现的功能静态页面的布局歌曲信息的动态显示鼠标悬停,功能按钮和文字高亮歌曲信息的动态显示歌曲播放进度条显示和动态移动纯净模式的模板设置和歌词写入案例布局 ...
html5卡拉OK音乐播放器,QQ音乐播放器怎么打开卡拉OK模式
QQ音乐播放器怎么打开卡拉OK模式时间:2020-08-05 12:25:56 责任编辑:随便就行 QQ音乐播放器怎么打开卡拉OK模式?QQ音乐播放器是生活中常用的音乐播放器,很多人在使用QQ音乐播 ...
qq音乐播放器2014最新版 v10.23.4377 官方版
qq音乐播放器2014最新版 v10.23.4377 官方版软件大小:11MB 软件语言:简体中文软件性质:常用软件软件授权:官方版更新时间:2014-05-06 应用平台:/Win8/Win ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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