python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)

文章目录

  • 一.前言
  • 二.展示
    • 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动图
      • 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设计展示
    • 1.主界面
    • 2.最新音乐
  • 三.心得体会
    • 1.UI设计
    • 2.面向对象
    • 3.信号与槽
    • 3.学习
      • 1.QtWinExtras
      • 2.QMovie
      • 3.操作指定布局组件
      • 4.特别
  • 四.总结


一.前言

传送门:
python3GUI–仿做一个网易云音乐By:PyQt5(附下载地址)

python3GUI–仿做一个网易云音乐(第二弹v1.5)By:PyQt5(附下载地址)

本篇为模仿网易云音乐2.0篇,是本系列最后一篇,本篇继续在v1.5基础上进行改进,尽最大努力模仿网易云音乐播放器UI,本篇将全方面介绍咱们的“网易云音乐”

二.展示

1.主界面

1.1个性推荐

1.1.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第1张图片

1.1.2动图

1.2专属定制

1.2.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第2张图片

1.2.2动图

1.3歌单

1.3.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第3张图片

1.3.2动图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第4张图片

1.4排行榜

1.4.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第5张图片

1.4.2动图

1.5歌手

1.5.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第6张图片

1.5.2动图

1.6歌单

1.6.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第7张图片

1.6.2-1动图-新歌速递

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第8张图片

1.6.2-2动图-新碟上架

2.播客

2.1.1静图-弹窗

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第9张图片

2.1.2静图-主要

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第10张图片

2.2.1动图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第11张图片

2.2.2动图-推荐

2.2.3动图-类别

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第12张图片

3.视频

3.1.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第13张图片

3.1.2动图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第14张图片

4.关注

4.1.1主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第15张图片

5.直播

5.1.1静图-主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第16张图片

5.1.2动图

6.私人FM

6.1.1静图-主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第17张图片

6.1.2动图-主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第18张图片

7.我喜欢的音乐

7.1.1静图-主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第19张图片

7.1.2动图-主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第20张图片

8.我喜欢的音乐

8.1.1静图-下载管理

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第21张图片

8.1.2静图-本地音乐

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第22张图片

8.1.3动图-下载管理

9.我喜欢的音乐

9.1.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第23张图片

10.其他细节

1.登录窗口

10.1.1静图-扫码登录

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第24张图片

10.1.2静图-其他登录

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第25张图片

10.1.3动图

csdn无法展示二维码,可以点击查看
python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第26张图片

2.播放列表

10.2.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第27张图片

10.2.2静图-列表为空

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第28张图片

3.热搜榜

10.3.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第29张图片

4.播放列表

10.4.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第30张图片

5.评论输入框

10.5.1静图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第31张图片

6.听歌识曲

10.6.1动图

7.系统托盘

10.7.1动图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第32张图片

8.windows缩略图

10.8.1动图

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第33张图片

三.概览

在此用一个思维导图展示本软件实现的所有UI
python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第34张图片

三.UI设计展示

这里拿两个页面作为示例展示

1.主界面

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第35张图片

2.最新音乐

python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第36张图片

三.心得体会

1.UI设计

整个UI设计方面要有一个全局观,从整体去看局部,首先先看整个页面布局大致是什么布局,然后再看每个布局中需要什么组件,让我们的仿品不止“长得像”,也要“用得像”。
在UI设计中,我很少直接将数据展示到U中,一般就是构思好布局后,在组件中放入Layout,最后在页面需要的时机,将数据填充到Layout中,这样做可以让我们的界面更加灵活,使逻辑与UI分离开来,通过单一的脚本即可完成UI中数据的操作,降低了UI与逻辑的耦合性,即使出了问题,我们也能很快地定位到问题所在。

2.面向对象

Designer可以帮我们绘制绝大部分的UI,但是无法满足我们的自定义需求,这里需要我们自己定义一个或多个组件基类,运用面向对象的思想封装、继承这个基类,这样,当我们在用的时候,直接new出这个对象,填入对应的数据,很方便地能够完成组件的创建,也能够大大减少我们的代码量与维护成本。

3.信号与槽

信号与槽机制是Qt的灵魂,它能够把一些事件或者自定义信号与我们的槽函数关联起来,一定要充分理解这个机制。举个例子:本次把歌单信息与歌单详情页关联起来,即用户点击了歌单,就会跳转到歌单详情页,而详情页的信息是歌单传过来的,,我们的界面有许多歌单,不能每一个歌单都写一个详情页吧?所以在歌单组件中加入自定义的信号,每当歌单组件被点击后,发射歌单名称,封面…等数据到歌单详情页,详情页把这些信息分开展示。(当然,如果接入了线上数据,大概率是发射一个歌单ID,然后通过接口拿到此ID的相关信息,展示到详情页。)

3.学习

在本次迭代过程中,学习到了一些新的Qt5库,在此分享给大家。

1.QtWinExtras

构建任务栏按钮,详情可参考

QT学习-核心类列表-38、QtWinExtras

2.QMovie

用于听歌识曲-加载动画

pyqt5 等待界面 (QMovie 加载 gif)

3.操作指定布局组件

在界面构建好后,可能需要动态调整指定布局中的组件。

QT:pyqt删除layout中的控件,移除、添加、替换控件

4.特别

在本次撰写播客-左上角推荐组件的时候,重写了一个QWidget,实现了鼠标滚轮滚动切换显示类别、类别内容,参考了一篇C++文章

QT滚动数字 滚动选择器 滑动选择器

四.总结

本次仍然对我们的云音乐播放器进行改进,在撰写UI过程中遇到了一些困难,参考了许多相关C++资料,因为是用碎片时间写的,前前后后加起来也花了一些时间,创作实属不易,能点个赞吗?。软件打包好,放在蓝奏云(解压后大小:37.8MB),大家可以自行下载体验。
python3GUI--仿做一个网易云音乐(第三弹v2.0)By:PyQt5(附下载地址)_第37张图片

你可能感兴趣的:(GUI-PyQt5,python,qt5,ui,pyqt)