界面分析 - 上

article/2025/7/15 6:44:42

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

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

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

界面上控件比较多,归类之后主要分为两部分: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.hkcw.cn/article/GfnDDuxlwQ.shtml

相关文章

电路图识图基础知识-高、低压供配电系统电气系统的继电自动装置(十三)

电气系统的继电自动装置 在供电系统中为保证系统的可靠性&#xff0c;保证重要负荷的不间断供电&#xff0c;常采用自动重合闸装置和备用电源自动投入装置。 1 自动重合闸装置 供配电系统多年运行实践表明&#xff0c;架空线路发生的故障多属于暂时性故障&#xff0c;如雷击…

NVMe协议简介之AXI总线更新

更新AXI4总线知识 AXI4总线协议 AXI4总线协议是由ARM公司提出的一种片内总线协议 &#xff0c;旨在实现SOC中各模块之间的高效可靠的数据传输和管理。AXI4协议具有高性能、高吞吐量和低延迟等优点&#xff0c;在SOC设计中被广泛应用 。随着时间的推移&#xff0c;AXI4的影响不…

机器学习:支持向量机(SVM)原理解析及垃圾邮件过滤实战

一、什么是支持向量机&#xff08;SVM&#xff09; 1. 基本概念 1.1 二分类问题的本质 在机器学习中&#xff0c;分类问题是最常见的任务之一。最简单的情况就是二分类&#xff1a;比如一封邮件是“垃圾邮件”还是“正常邮件”&#xff1f;一个病人是“患病”还是“健康”&a…

数据库系统概论(十二)SQL 基于派生表的查询 超详细讲解(附带例题表格对比带你一步步掌握)

数据库系统概论&#xff08;十二&#xff09;SQL 基于派生表的查询 超详细讲解&#xff08;附带例题表格对比带你一步步掌握&#xff09; 前言一、什么是派生表&#xff1f;二、派生表的使用示例场景1&#xff1a;分组统计后过滤数据场景2&#xff1a;替代临时表查询 三、SELEC…

二、Sqoop 详细安装部署教程

作者&#xff1a;IvanCodes 日期&#xff1a;2025年6月2日 专栏&#xff1a;Sqoop教程 Apache Sqoop 是一个强大的工具&#xff0c;用于在 Hadoop (HDFS, Hive, HBase) 与关系型数据库 (如 MySQL, PostgreSQL, Oracle) 之间高效传输数据。本教程将详细指导您如何根据官方网站截…

【烧脑算法】不定长滑动窗口:从动态调整到精准匹配以灵活特性实现高效破题

目录 求最长/最大 2730. 找到最长的半重复子字符串 2779. 数组的最大美丽值 1838. 最高频元素的频数 2516. 每种字符至少取 K 个 2831. 找出最长等值子数组 求最短/最小 1234. 替换子串得到平衡字符串 2875. 无限数组的最短子数组 76. 最小覆盖子串 632. 最小区间 …

一步一步配置 Ubuntu Server 的 NodeJS 服务器详细实录——3. 服务器软件更新,以及常用软件安装

前言 前面&#xff0c;我们已经 安装好了 Ubuntu 服务器系统&#xff0c;并且 配置好了 ssh 免密登录服务器 &#xff0c;现在&#xff0c;我们要来进一步的设置服务器。 那么&#xff0c;本文&#xff0c;就是进行服务器的系统更新&#xff0c;以及常用软件的安装 调整 Ubu…

JSP、HTML和Tomcat

9x9上三角乘法表 乘法表的实现 <% page contentType"text/html;charsetUTF-8" language"java" %> <!DOCTYPE html> <html> <head><title>99 上三角乘法表</title><style>body {font-family: monospace;padding…

概率统计:AI大模型的数学支柱

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…

打造极致计算器:HTML+Tailwind+DaisyUI实战

一、计算器总体描述 创建一个在线计算器来实现基础数学运算功能&#xff0c;通过单一页面集成数字按钮、运算符按钮和显示结果区域&#xff0c;界面采用简洁直观的布局设计&#xff0c;按钮排列合理且提供即时运算反馈&#xff0c;确保计算逻辑准确和良好的按键响应体验&#x…

使用 HTML + JavaScript 实现图片裁剪上传功能

本文将详细介绍一个基于 HTML 和 JavaScript 实现的图片裁剪上传功能。该功能支持文件选择、拖放上传、图片预览、区域选择、裁剪操作以及图片下载等功能&#xff0c;适用于需要进行图片处理的 Web 应用场景。 效果演示 项目概述 本项目主要包含以下核心功能&#xff1a; 文…

【存储基础】存储设备和服务器的关系和区别

文章目录 1. 存储设备和服务器的区别2. 客户端访问数据路径场景1&#xff1a;经过服务器处理场景2&#xff1a;客户端直连 3. 服务器作为"中转站"的作用 刚开始接触存储的时候&#xff0c;以为数据都是存放在服务器上的&#xff0c;服务器和存储设备是一个东西&#…

SwinTransformer改进(13):融合CPCA注意力

1.创新点介绍 引言 本文将深入解析一个创新的CNN模型架构,它巧妙地将Swin Transformer与自定义的通道-位置交叉注意力(CPCA) 模块相结合。这种设计在保持Transformer强大特征提取能力的同时,通过注意力机制增强了模型对关键特征的聚焦能力。 1. CPCA注意力模块 class CP…

乌方提议6月底前俄乌进行下一轮谈判 等待俄方回应

6月2日,俄乌第二轮谈判在伊斯坦布尔的契拉昂宫举行。乌克兰国防部长乌梅罗夫表示,乌克兰提议在6月底之前再次与俄方会面,但俄方尚未对此做出回应。此次谈判由土耳其外长费丹主持。俄方代表团团长是俄总统助理梅金斯基,成员包括俄副外长加卢津、俄武装力量总参谋部总局局长科…

韩大选热度或打破纪录 政坛洗牌在即

韩国政坛即将迎来新一轮洗牌。6月3日,韩国将提前举行第21届总统选举。原定于2027年的大选因前总统尹锡悦在去年12月初发动戒严并于今年4月4日被弹劾而提前两年多举行。根据韩国宪法规定,总统被罢免后必须在6个月内举行总统选举。此次大选吸引了朝野两党的多位候选人参与,最终…

【LLM 指令遵循】论文分享:ULTRAIF

论文名称&#xff1a;UltraIF: Advancing Instruction Following from the Wild 论文链接&#xff1a;https://arxiv.org/abs/2502.04153 机构&#xff1a;上海AI Lab 北大 清华 Github代码链接&#xff1a;https://github.com/kkk-an/UltraIF 数据集链接&#xff1a;https:/…

Ruoyi AI 部署指南:从环境搭建到项目运行

目录 一、项目概述 二、环境准备 1. Java 开发环境 2. 数据库 3. 缓存系统 4. 构建工具 5. 前端工具 三、后端项目部署 1. 下载项目 2. 导入项目 安装jdk17后没有jre ​编辑 3. 配置 Maven 4. 初始化数据库 5. 启动 Redis 6. 启动项目 四、前端项目部署 1. 管…

凹凸工坊_AI手写模拟器|可打印的手写稿|免抄写的工具,抄写罚抄神器,一键生成手写文稿,模仿手写软件,在线手写字体转换器,手写模拟器APP下载,打印出以假乱真的模拟手写文档,模拟抄写软件

推荐这个非常好用的免费 ai 手写模拟器网站&#x1f50d;「凹凸工坊-手写转换」 地址&#xff1a;凹凸工坊_凹凸工坊-手写转换官网入口_一键生成手写文稿_手写模拟器_手写字体在线转换_在线字体制作_手写APP下载_模仿手写软件_AI手写字体生成_手写字体生成器_字体下载https://…

芝士ai系统,宝藏的论文查重降重经验!

完成一篇论文的辛苦工作后&#xff0c;面对高查重率无疑是令人沮丧的。但不必担忧&#xff0c;芝士AI降重工具可以助你一臂之力。本文将探讨芝士AI如何帮助学者们有效降低查重率&#xff0c;确保论文的原创性和学术价值。让我们一起看看芝士AI如何让学术写作变得更轻松。 芝士…

IDEA + DeepSeek 实现 AI辅助编程,提升效率10倍(全网超详细的终极图文实战指南)

前言 在软件开发的世界里&#xff0c;每个开发者都经历过这样的困境——在重复的CRUD代码中机械劳动&#xff0c;为复杂的业务逻辑调试数小时&#xff0c;或是在海量文档中寻找某个API的正确用法。传统的IDE工具虽能提供基础支持&#xff0c;却难以突破效率的“玻璃天花板”。而…