QT音乐播放器实现页面跳转与播放功能
简介：
基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）
上一讲链接：https://blog.csdn.net/2301_80668528/article/details/152614244?fromshare=blogdetail&sharetype=blogdetail&sharerId=152614244&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
下一讲链接：https://blog.csdn.net/2301_80668528/article/details/153211622?fromshare=blogdetail&sharetype=blogdetail&sharerId=153211622&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
ps：如有错误，欢迎指出^\/^
原视频出处：https://b23.tv/gFnMsLg
一、“轮播图”跳转专辑/歌单详情
专辑歌单页面为跳转页面，故需要另起一个.qml文件
1.新建专辑歌单对应的.qml文件
复制DetialHistoryPageView.qml文件，粘贴，重命名：“DetailPlayListPageView.qml”
设置纵列布局，并修改对应文本内容：
2.编写页面上方的图片与文字的行布局
/* 页面上方行布局 */
RowLayout
{
RowLayout
{
height: 140
width:parent.width
/* 图片 */
MusicRoundImage
{
id: playListCover
width: 130
height: 130
Layout.leftMargin: 15 //左边距
imgSrc: "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg"
}
/* 文本内容 */
Item
{
Layout.fillWidth: true
height:parent.height
Text
{
id: playListDesc
text: "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpghttps://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpghttps://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpghttps://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg" //暂时先插入任意长文本
width: parent.width * 0.95
anchors.centerIn: parent //居中
wrapMode: Text.WrapAnywhere //自动换行
font.family: window.mFONT_FAMILY
font.pointSize: 10
maximumLineCount: 4
elide: Text.ElideRight //超出长度部分自动在最右侧用省略号代替
lineHeight: 1.3 //行距
}
}
}
}
/* 列表 */
MusicListView
{
id: playListListView
}
3.在PageHomeView注册列表进行注册
但是不能让专辑歌单加载到菜单里面，所以需要给这些组件设置属性menu的show属性：
在下方第137行“组件加载”中获取数据时，用过滤器来过滤掉DetailPlayListPageView.qml：
4.创建新函数，用于显示/隐藏“专辑歌单”页面
（1）创建函数：
showPlayList() //显示“专辑歌单”页面
hidePlayList() //隐藏“专辑歌单”页面
（2）编辑专辑歌单页面显示/隐藏函数
和上方第122~128行鼠标点击事件逻辑相似：
4.程序刚运行时不显示此页面
将defaultIndex默认值改为0，使其先加载“推荐内容”页面：
5.调用showPlayList()函数
在PageHomeView.qml中组件加载时调用显示专辑歌单页面函数，并注释其他行：
因为menuView.currentIndex中暂时没有内容，故需要先注释掉两函数中的repeater.itemAt()行：
Ctrl+R运行：
6.添加“推荐内容”页面的图片点击事件
（1）进入PageHomeView.qml文件，取消“加载组件Component.onCompleted:{}”的注释，并删除showPlayList()函数：
取消显示/隐藏专辑歌单页面函数中的repeater.itemAt()行：
（2）添加点击事件：
①进入DetailRecommendPageView.qml文件，找到轮播图“MusicBannerView”，按住Ctrl并左键它，进入MusicBannerView.qml文件，找到并完善onClicked:{}事件：
/* 点击左右侧图片时切换图片 */
MouseArea
{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor //切换鼠标形状
onClicked:
{
if(bannerView.currentIndex === index)
{
var item = bannerView.model[index]
var targetId = item.targetId + "" //目标专辑的id号
var targetType = item.targetType + "" //targetType为1，则说明此歌曲为单曲；为10：专辑；为1000：歌单，加上引号时为了强制类型转换为字符串型
switch(targetType)
{
case "1":
//播放对应歌曲
break
case "10":
//打开对应专辑
break
case "1000":
//打开播放列表
break
}
console.log(targetId,targetType)
}
else
{
bannerView.currentIndex = index
}
}
} 其中，对于targetType：
Ctrl+R运行，随机点击轮播图的中心图片：
应用程序输出栏有了对应输出：
②“打开播放列表”需要调用“PageHomeView{}”中的playListView()函数，并传入参数“targetType”和“targetId”：
进入DetialPlayListPageView.qml文件，定义属性：“targetType”、“targetId”、“name”
进入PageHomeView.qml文件，为函数定义添加参数：
③进入DetialPlayListPageView.qml文件，修改文本内容：
④添加targetId与targetType改变时的槽函数：
⑤分别定义加载“歌单”信息的函数loadPlayList()和加载“专辑”信息的函数loadAlbum()：
与getBannerList()函数逻辑类似，放在DetailPlayListPageView{}最后：
⑥给MusicListView加上额外的分页条件：
Ctrl+R运行，点击轮播图中任意“歌单”：
再次点击左侧菜单栏按键，发现歌单详情页没有隐藏：
7.隐藏专辑/歌单详情页
在PageHomeView中的onClicked:{}事件中添加隐藏歌单详情页的函数：
Ctrl+R运行，点击轮播图中任意“歌单”，再次点击菜单任意栏目，歌单就被隐藏了
二、“热门歌单”跳转歌单详情
1.添加MouseArea{}的onClicked:{}事件
注意：“热门歌单”中只有可能是歌单，故勿需用到targetType：
Ctrl+R运行，点击“热门歌单”中任意歌单都会出现对应歌单：
2.去掉默认数据
进入DetailPlayListPageView.qml文件
去掉详情页面上方文本中之前添加的默认数据：
去掉默认图片：
三、获取音频链接并播放
进入main.qml文件：
1.引入音频播放模块
import QtMultimedia 5.12 //音频播放2.添加媒体播放组件MediaPlayer并设置id
放在main.qml 文件最后：
3.在MusicListView.qml的点击事件中查看id
找到MusicIconButton（“播放/暂停”、“收藏”）按键：
打印id：
点击播放、收藏按钮，应用程序输出栏显示id：
4.添加播放音乐函数
（1）进入MusicListView.qml文件，在文件末添加函数playMusic()：
其中，Index是当前播放音乐的索引
将id打印挪到播放函数中：
（2）在onClicked:{}事件中调用播放函数：
（3）添加播放（加载）乐接口函数内容：
5.设置音乐对应信息
（1）设置音乐列表封面cover
将MusicListView.qml中的播放音乐函数剪贴入LayoutBottomView{}中：
修改MusicListView中的播放按键的点击事件：
在LayoutBottomView.qml中添加播放列表：
再进入MusicListVIew.qml中，完善onClicked:{}事件：
将播放音乐划分成两个接口函数：
在DetailPlayListPageView.qml文件中map传递数据时多给一个参数--歌曲列表的封面图片cover：
在DetailSearchPageView.qml文件中map传递数据时也多给一个参数--歌曲列表的封面图片cover：
由于localhost/3000/search?keywords中的cover图片都是同一张，故需要单独发起获取cover的请求----在LayoutBottomView.qml中添加函数接口getCover()：
（2）设置底部功能栏“歌名/歌手”--nameText：
Ctrl+R运行：
至此，QT Quick QML项目音乐播放器⑩----“轮播图”跳转专辑/歌单详情、“热门歌单”跳转歌单详情、获取音频链接并播放完结，感谢您的阅读！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
