简介：

基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）

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

下一讲链接：后续更新...

上一讲效果：



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

一、无边框拖动

1.添加无边框

在main.qml中添加“flags”：

但此时无法对窗口进行拖动

2.无边框情况下用顶部工具栏的拖动Windows

进入LayoutHeaderview.qml文件：

（1）添加坐标变量：

（2）在中写拖动函数接口dragWindow()：

（3）在Item组件“恋羽Music”的鼠标拖动事件：

（4）代码函数接口化

Ctrl+R运行：

无边框拖动效果

3.无边框情况下用底部工能栏的拖动Windows

进入LayoutBottomView,qml文件：

（1）添加鼠标事件：

Ctrl+R运行，拖动底部功能栏空白部分，测试效果符合预期

二、小窗播放

进入LayoutHeaderView.qml文件，找到小窗播放按键

设置进入小窗模式时：

1.自动跳转到PageDetailView（音乐播放详情页面）界面

2.隐藏进度条与底部音乐封面

（1）将“是否为小窗模式”定义为变量暴露出来：

（2）根据上述变量值处理改变进度条与底部音乐封面的可视性属性

3.设置点击“小窗播放”、“退出小窗播放”按键时改变变量值isSmallWindow

4.设置歌词不可视

进入PageDetailView.qml文件：

5.设置底部功能栏的Item“歌曲-歌手”不可视

给定左边唱片部分的fillWidth属性，以便去掉右边歌词部分后，此部分能够自动伸缩：

6.添加小窗播放时的两行歌词

Ctrl+R与运行：

三、应用隐藏至系统托盘

1.新建QML文件

命名为“AppSystemTrayIcon”：

2.包含模块

import QtQuick 2.12

import Qt.labs.platform 1.0

3.在main.qml中调用

4.编写.qml主体内容

（1）基本属性

（2）菜单托盘

①“上一首”

/* 上一首 */
MenuItem
{
    text: "上一首"
    onTriggered: layoutBottomView.playPrevious()
}

②“播放”/“暂停”

在LayoutBottomView.qml中将播放/暂停封装为函数接口：

在菜单托盘的暂停/播放中调用：

/* 播放/暂停 */
MenuItem
{
    text: layoutBottomView.playState === 0 ? "播放" : "暂停"
    onTriggered: layoutBottomView.playOrPause()
}

③“下一首”

/* 下一首 */
MenuItem
{
    text: "下一首"
    onTriggered: layoutBottomView.playNext()
}

④显示窗口

/* 显示 */
MenuItem
{
    text: "显示"
    onTriggered: window.show()
}

⑤退出播放器

/* 退出音乐播放器 */
MenuItem
{
    text: "退出"
    onTriggered: Qt.quit()
}

Ctrl+R运行，点击右上角最小化按键：

打开系统托盘，可以看到我们做的音乐播放器：

右键托盘中的音乐播放器，菜单栏中选项显示出来了：

随机播放一首音乐：

系统托盘效果①

⑥在下一曲和显示之间添加分割线添加分割线MenuSeparator{}：

Ctrl+R运行，打开 系统托盘：

        至此，QT Quick QML项目音乐播放器16----无边框窗口拖动、小窗播放、隐藏系统托盘正式完结，感谢您的阅读！ *  \/  *