简介:
基于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----无边框窗口拖动、小窗播放、隐藏系统托盘正式完结,感谢您的阅读! * \/ *