当前位置：首页 > news >正文

QT音乐播放器18----新歌速递播放、隐藏顶部和底部工具栏、自定义ToolTips

news 2025/11/15 6:35:06

简介：

基于QT5.12版本的Quick QML项目----恋羽音乐播放器（已完结）

上一讲链接：https://blog.csdn.net/2301_80668528/article/details/154523872

上一讲效果：

（1）Notification提示效果：

Notification错误提示效果

（2）Loading加载中提示效果：

Loading效果

ps:如有错误，欢迎指出 * \/ * ！

原视频出处：https://b23.tv/gFnMsLg

一、新歌速递播放

1.添加onClicked:{}点击事件

进入MusicGridLatestView.qml文件：

2.修改playWebMusic()接口逻辑

进入LayoutBottomView.qml文件：

在获取封面之后添加getLyric()接口：

CTrl+R运行，点击新歌速递之中的随机一首，即可开始播放

另外，解决Notification层级问题:

1.在main.qml文件中将Notification和Loading组件放在ColumnLayout布局之后

2.添加loadAlbum()的Loading、Notification提示

3.添加loadPlayList()接口的Loading、Notification提示

Ctrl+R运行：

Notification、Loading层级效果

从效果中可发现，此时Notification、Loading就会显示在页面最上层

二、隐藏顶部和底部功能栏

设计一个在PageDetailView.qml左侧旋转音乐封面图片所在的Frame{}的Enter、Exit事件

1.添加左侧Frame{}的Enter事件

2.添加Enter事件需要触发的函数接口

3.鼠标进入左侧Frame{}区域时将可视化属性设置成false

4.鼠标退出左侧Frame{}时将可视化属性设置成true

5.添加鼠标进入左侧Frame区域且3秒内不移动则隐藏鼠标

（1）给MouseArea赋予id

（2）添加Timer组件

（3）添加onMouseXChanged:{}事件

6.点击左侧Frame{}区域时显示顶部、底部功能栏

添加onClicked:{}事件：

7.切出去PageDetailView页面时自动显示顶部、底部功能栏

Ctrl+R运行：

（隐藏顶部、底部工具栏及鼠标效果，审核中...）

三、自定义ToolTip

1.新建.qml文件

命名为MusicToolTip.qml：

2.添加模块

import QtQuick 2.12

import QtQuick.Window 2.12

3.编辑内容

/************ 自定义按键提示文字ToolTip ************/import QtQuick 2.12
import QtQuick.Window 2.12Rectangle
{property alias text: content.textproperty int margin: 15     //边间距id: selfcolor: "white"radius: 4width: content.width + 20height: content.height + 10anchors{top: getGlobalPosition(parent).y + parent.height + margin + height < Window.height ? parent.bottom : undefinedbottom: getGlobalPosition(parent).y + parent.height + margin + height >= Window.height ? parent.top : undefined//超出窗体范围时用left和right限制left: (width - parent.witdh) / 2 > getGlobalPosition(parent).x ? parent.left : undefinedright: (width + getGlobalPosition(parent).x) > Window.width ? parent.right : undefinedtopMargin: marginbottomMargin: margin}x: (width - parent.witdh) / 2 <= parent.x && width + parent.x <= Window.width ? (-width + parent.width)/2 : 0Text{id: contenttext: "这是一段提示文字！"lineHeight: 1.2anchors.centerIn: parentfont.family: window.mFONT_FAMILY}/* 获取绝对坐标接口 */function getGlobalPosition(target = parent){var targetX = 0var targetY = 0while(target !== null){targetX += target.xtargetY += target.ytarget = target.parent}return{x: targetX,y: targetY}}
}