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

简介：

基于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.12

Rectangle
{
    property alias text: content.text
    property int margin: 15     //边间距
    id: self

    color: "white"
    radius: 4
    width: content.width + 20
    height: content.height + 10

    anchors
    {
        top: getGlobalPosition(parent).y + parent.height + margin + height < Window.height ? parent.bottom : undefined
        bottom: getGlobalPosition(parent).y + parent.height + margin + height >= Window.height ? parent.top : undefined
        //超出窗体范围时用left和right限制
        left: (width - parent.witdh) / 2 > getGlobalPosition(parent).x ? parent.left : undefined
        right: (width + getGlobalPosition(parent).x) > Window.width ? parent.right : undefined
        topMargin: margin
        bottomMargin: margin
    }
    x: (width - parent.witdh) / 2 <= parent.x && width + parent.x <= Window.width ? (-width + parent.width)/2 : 0

    Text
    {
        id: content
        text: "这是一段提示文字！"
        lineHeight: 1.2
        anchors.centerIn: parent
        font.family: window.mFONT_FAMILY
    }

    /* 获取绝对坐标接口 */
    function getGlobalPosition(target = parent)
    {
        var targetX = 0
        var targetY = 0
        while(target !== null)
        {
            targetX += target.x
            targetY += target.y
            target = target.parent
        }
        return{
            x: targetX,
            y: targetY
        }
    }
}

4.调用此自定义ToolTip

（1）在MusicToolButton.qml中注释或删除掉之前设置的ToolTip

调用自定义ToolTip：

（2）在MusicIconButton.qml中注释或删除掉之前设置的ToolTip

调用自定义ToolTip：

5.修改ToolTip层级为最上层

进入main.qml文件，设置LayoutHeaderView{}组件的z坐标为1000：

Ctrl+R运行，效果即可实现：

至此，QT音乐播放器项目正式完结，感谢您的阅读 * \/ * ！