文章目录
一.前言
传送门:
python3GUI–仿做一个网易云音乐By:PyQt5(附下载地址)
python3GUI–仿做一个网易云音乐(第二弹v1.5)By:PyQt5(附下载地址)
本篇为模仿网易云音乐2.0篇,是本系列最后一篇,本篇继续在v1.5基础上进行改进,尽最大努力模仿网易云音乐播放器UI,本篇将全方面介绍咱们的“网易云音乐”
二.展示
1.主界面
1.1个性推荐
1.1.1静图
1.1.2动图
1.2专属定制
1.2.1静图
1.2.2动图
1.3歌单
1.3.1静图
1.3.2动图
1.4排行榜
1.4.1静图
1.4.2动图
1.5歌手
1.5.1静图
1.5.2动图
1.6歌单
1.6.1静图
1.6.2-1动图-新歌速递
1.6.2-2动图-新碟上架
2.播客
2.1.1静图-弹窗
2.1.2静图-主要
2.2.1动图
2.2.2动图-推荐
2.2.3动图-类别
3.视频
3.1.1静图
3.1.2动图
4.关注
4.1.1主界面
5.直播
5.1.1静图-主界面
5.1.2动图
6.私人FM
6.1.1静图-主界面
6.1.2动图-主界面
7.我喜欢的音乐
7.1.1静图-主界面
7.1.2动图-主界面
8.我喜欢的音乐
8.1.1静图-下载管理
8.1.2静图-本地音乐
8.1.3动图-下载管理
9.我喜欢的音乐
9.1.1静图
10.其他细节
1.登录窗口
10.1.1静图-扫码登录
10.1.2静图-其他登录
10.1.3动图
csdn无法展示二维码,可以点击查看
2.播放列表
10.2.1静图
10.2.2静图-列表为空
3.热搜榜
10.3.1静图
4.播放列表
10.4.1静图
5.评论输入框
10.5.1静图
6.听歌识曲
10.6.1动图
7.系统托盘
10.7.1动图
8.windows缩略图
10.8.1动图
三.概览
在此用一个思维导图展示本软件实现的所有UI
三.UI设计展示
这里拿两个页面作为示例展示
1.主界面
2.最新音乐
三.心得体会
1.UI设计
整个UI设计方面要有一个全局观,从整体去看局部,首先先看整个页面布局大致是什么布局,然后再看每个布局中需要什么组件,让我们的仿品不止“长得像”,也要“用得像”。
在UI设计中,我很少直接将数据展示到U中,一般就是构思好布局后,在组件中放入Layout,最后在页面需要的时机,将数据填充到Layout中,这样做可以让我们的界面更加灵活,使逻辑与UI分离开来,通过单一的脚本即可完成UI中数据的操作,降低了UI与逻辑的耦合性,即使出了问题,我们也能很快地定位到问题所在。
2.面向对象
Designer可以帮我们绘制绝大部分的UI,但是无法满足我们的自定义需求,这里需要我们自己定义一个或多个组件基类,运用面向对象的思想封装、继承这个基类,这样,当我们在用的时候,直接new出这个对象,填入对应的数据,很方便地能够完成组件的创建,也能够大大减少我们的代码量与维护成本。
3.信号与槽
信号与槽机制是Qt的灵魂,它能够把一些事件或者自定义信号与我们的槽函数关联起来,一定要充分理解这个机制。举个例子:本次把歌单信息与歌单详情页关联起来,即用户点击了歌单,就会跳转到歌单详情页,而详情页的信息是歌单传过来的,,我们的界面有许多歌单,不能每一个歌单都写一个详情页吧?所以在歌单组件中加入自定义的信号,每当歌单组件被点击后,发射歌单名称,封面…等数据到歌单详情页,详情页把这些信息分开展示。(当然,如果接入了线上数据,大概率是发射一个歌单ID,然后通过接口拿到此ID的相关信息,展示到详情页。)
3.学习
在本次迭代过程中,学习到了一些新的Qt5库,在此分享给大家。
1.QtWinExtras
构建任务栏按钮,详情可参考
2.QMovie
用于听歌识曲-加载动画
3.操作指定布局组件
在界面构建好后,可能需要动态调整指定布局中的组件。
4.特别
在本次撰写播客-左上角推荐组件的时候,重写了一个QWidget,实现了鼠标滚轮滚动切换显示类别、类别内容,参考了一篇C++文章
四.总结
本次仍然对我们的云音乐播放器进行改进,在撰写UI过程中遇到了一些困难,参考了许多相关C++资料,因为是用碎片时间写的,前前后后加起来也花了一些时间,创作实属不易,能点个赞吗?。软件打包好,放在蓝奏云(解压后大小:49.2MB),大家可以自行下载体验。