当前位置: 首页 > ds >正文

界面分析 - 上

上方:图标,搜索框,功能按钮

左侧:文本显示,自定义按钮,点击自定义按钮的时候,最底下播放条不变,右侧界面随着按钮的改变而改变

右侧:文本信息显示,图片+按钮,信息展示,列表框

界面上控件比较多,归类之后主要分为两部分:head区和body

head区域从左往右依次为:图标,搜索框,更换皮肤按钮,最小化,最大化,退出按钮

body区域分为左侧种类选择区域和右侧Page展示区域

Body左侧区域有两部分组成:在线音乐和我的音乐,这两部分内部的控件种类是相同的 

①说明区域,实际为QLabel

②自定义控件(按钮的扩展): 图片+文本+动画

③同②,自定义控件(按钮的扩展): 图片+文本+动画

④同②,自定义控件(按钮的扩展): 图片+文本+动画

Body右侧区域由:Page区,播放进度条,播放控制区三部分区域组成

① Page区: 歌曲信息页面,点击 < 或 > 具有轮播图效果

② 播放进度: 当前歌曲播放进度说明,支持seek功能,与播放控制区时间,以及LRC歌词是同步的

③ 播放控制区域: 显示歌曲图片&名称&歌手、

播放模式 & 下一曲 & 播放暂停 & 上一曲 & 音量调节和静音 & 添加本地音乐、

当前播放时间 / 歌曲总时长 & 弹出歌词窗口按钮

【Page区说明】

当点击body左侧不同按钮时,Page区域会显示不同的页面。

Body左侧按钮Body右上侧Page显示
推荐按钮
乐馆按钮暂不支持
视频按钮暂不支持
雷达按钮暂不支持
我喜欢按钮
最近播放按钮
本地下载按钮

Body右侧目前支持的4个页面结构,整体的布局都是相同的,唯独Page区域现实的内容稍有区别,推荐页面具有类似轮播图的动态效果

整个页面内容可以分为上下两组:今日为你推荐、你的歌单宝藏库,两组的布局关际是相同的,元素说明:

  • 上方显示1行,内部有4个推荐元素;下方显示2行,每行有4个推荐元素
  • 左右两侧一个按钮,点击后推荐内容会更换下一批,不停点击会循环推荐
  • 当鼠标悬停在推荐元素上时,推荐元素会向上移动,当鼠标离开时,又回到原位置
  • 当鼠标悬停在推荐元素上时,同时会出现小手图标,说明该推荐元素具有点击功能

该页面中内容也为自定义元素,后序页面实现时具体分析。

我喜欢,本地下载,最近播放类似下图:

① QLabel: 类型说明

② QLabel: 图片显示

③ QButton: 播放全部按钮

④ 一组QLabel说明: 音乐、歌手、专辑

⑤ QListWidget: 播放列表

可以通过自定义控件的方式,将①~⑤的控件集成到一起形成一个新的控件,方便复用,因此这三个Page属于同一个自定义类型的Page。

这六个页面,将来也QStackedWidget控件组织起来,就可以实现点击不同按钮,显示不同页面效果。

【歌词页面】

解析当前正在播放音乐的歌词,同步显示在界面上。

显示内容分为:歌曲信息、歌词部分、左上方收起隐藏按钮。

  • 歌曲信息由歌曲名称(QLabel)和歌手名称(QLabel)构成
  • 歌词部分展示当前在唱歌词(QLabel)和在唱部分前三行和后三行歌词(QLabel)展示,当前播放 歌词突出显示
  • 点击收起按钮后,该页面会以动画的方式收起

当歌曲有LRC歌词时,播放时歌词会随播放时间自动调整;歌曲没有LRC歌词时,歌词部分显示空字符。

以上对本项目的界面进行了简单的说明,大家先有个初步了解,接下来利用QT Designer完成界面的布局。

http://www.xdnf.cn/news/10788.html

相关文章:

  • RabbitMQ深度解析:从基础实践到高阶架构设计
  • leetcode93.复原IP地址:回溯算法中段控制与前导零处理的深度解析
  • Figma 中构建 Master Control Panel (MCP) 的完整设计方案
  • Docker 安装 Redis 容器
  • SQL 执行顺序详解
  • Laplace 噪声
  • 扩展数据(Concatenate)组件研究
  • 《AI Agent项目开发实战》DeepSeek R1模型蒸馏入门实战
  • Python----目标检测(《YOLO9000: Better, Faster, Stronger》和YOLO-V2的原理与网络结构)
  • SystemVerilog—三种线程之间的区别
  • 掌握HttpClient技术:从基础到实战(Apache)
  • IBM 与嘉士伯(Carlsberg)携手推进 SAP S/4HANA 数字化转型,打造啤酒行业新范式
  • Altium Disigner(16.1)学习-元器件封装
  • 从0开始学vue:pnpm怎么安装
  • 【深度学习】实验四 卷积神经网络CNN
  • 【设计模式-3.5】结构型——装饰器模式
  • 网络攻防技术二:密码学分析
  • 从0开始学vue:vue3和vue2的关系
  • VitalInsight智能体检报告解读
  • YOLOv5 :训练自己的数据集
  • SpringBoot(六)--- AOP、ThreadLocal
  • FastAPI安全认证:从密码到令牌的魔法之旅
  • 打卡第34天:MLP神经网络训练
  • 有公网ip但外网访问不到怎么办?内网IP端口映射公网连接常见问题和原因
  • OpenCV4.4.0下载及初步配置(Win11)
  • 【iOS(swift)笔记-14】App版本不升级时本地数据库sqlite更新逻辑二
  • 从 AMQP 到 RabbitMQ:核心组件设计与工作原理(二)
  • 使用 HTML + JavaScript 实现图片裁剪上传功能
  • Java Script函数
  • 操作系统:文件系统笔记