QT音乐播放器⑨----搜索音乐页面：列表分页、音乐列表操作按键、高亮及表底边框
简介：
基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）
上一讲链接：https://blog.csdn.net/2301_80668528/article/details/152420929?fromshare=blogdetail&sharetype=blogdetail&sharerId=152420929&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
下一讲链接：https://blog.csdn.net/2301_80668528/article/details/152801602?fromshare=blogdetail&sharetype=blogdetail&sharerId=152801602&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link
上一讲效果：
搜索音乐_音乐列表效果①
ps：如有错误，欢迎指出^\/^
原视频出处：https://b23.tv/gFnMsLg
一、搜索音乐页面：列表分页
根据关键字对应的歌曲总数songCount进行分页
1.修改获取音乐列表数据函数
（1）删除获取音乐列表数据函数doSearch()中的打印函数console.log()：
（2）修改链接地址
http.connet("search?keywords=" + keywords + "&offset=" + 0 + "&limit=60")其中，“offset”：数据偏移量，“limit”：限制返回的数据量
将offset设置成doSearch()函数的参数，初始化为0，地址也修改成对应的变量：
（3）取出关键词能搜索到的歌曲总个数result.songCount，并存入musicListView.all中：
（3）对musicListView.all和与其关联的变量进行定义
2.制作分页需要的按键
（1）给定listView底部边间距
anchors.bottomMargin: 50（2）在两个component后面添加分页功能按钮：
/* 分页按键begin */
Item
{
id: pageButton
visible: musicList.length !== 0
width: parent.width
height: 40
anchors.top: listView.bottom
anchors.topMargin: 10 //与height的和必须等于listView的bottomMargin值，否则会超出范围
ButtonGroup //ButtonGroup功能：有一堆可选中的按钮，使这些按键同时只能被选中其中一个
{
buttons:[]
}
RowLayout
{
id: buttons
anchors.fill: parent
Repeater
{
id: repeater
//(关键词能搜索出的歌曲总数 除 单页能放下歌曲数) >9 时，设置九个Button; <9 时，设置（all/pageSize）个button
model: all/pageSize > 9 ? 9 : all/pageSize
Button
{
Text
{
anchors.centerIn: parent //居中
text: modelData + 1 //此处的modelData是页数的index索引，故需要+1
font.family: window.mFONT_FAMILYT
font.pointSize: 12
color: checked ? "#497563" : "black" //当前被选中的页数Button变色，没有被选中的保持黑色
}
background: Rectangle
{
implicitHeight: 30
implicitWidth: 30
color: checked ? "#e2f0f8" : "#20e9f4ff"
radius: 3
}
checkable: true //按键可被选中
checked: modelData === currentPage
onClicked:
{
if(currentPage == index) return
currentPage = index
/* 切换页数的信号与槽 */
}
}
}
}
}
/* 分页按键begin */ 在切换页数是是通过在MusicListView.qml中按下页数按键实现的，此时也需要提醒DetailSearchPageView.qml进行页面的切换，故需要在MusicListView.qml中定义一个信号并实现对应的槽函数，再DetailSearchPageView.qml使用即可实现，下面来进行实现：
3.按下按钮与切换页面的信号与槽连接
（1）在MusicListView.qml的的Frame{}下定义信号loadMore(int offest)：
（2）在Button{}的onClicked:{}中调用：
（3）在MusicListView组件调用中定义槽函数onLoadMore: {}：
进入DetailSearchPageView.qml中
（4）在ButtonGroup{}中传入buttons：
(4)歌曲序号随着页面切换二修改
修改“序号”对应文本：
text: index + 1 + pageSize * currentPageCtrl+R运行，点击下方按钮“2”，即跳转至第二页，下方应用程序输出index值：“60”：
点击下方按钮“3”，即跳转至第二页，下方应用程序输出index值：“120”：
（5）修改下方页数按钮的对齐方式与高宽：
将第210行anchors.fill: parent属性改成：
anchors.centerIn: parent
将ListView{}的 anchors.bottomMargin 属性多给10左右（如“60”）：
anchors.bottomMargin: 60
将分页按键组Item{}的 topMargin 属性多给5（如“15”）：
anchors.topMargin: 15
Ctrl+R运行，现在按键就不会和上面的数据叠在一起了：
二、音乐列表“操作”按键
删除Text文本--“操作”
进入MusicListView.qml文件
添加Item{}，横向对齐RowLayout{}，编写三个Button并设置属性：
Ctrl+R运行，搜索关键字，鼠标移动至搜藏按钮处：
颜色等背景图换好之后再修改
三、音乐列表当前行高亮显示、底边框
1.当前行高亮
（1）鼠标悬浮当前行高亮显示
在MusicListView.qml的 listViewDelegate下添加MouseArea{}功能（需要将RowLayout包括在呢内，否则RowLayout中的按键将无法点击）：
Ctrl+R，鼠标拖动到对应歌曲上方悬停：
（2）当前播放音乐高亮显示
给ListView{}也添加高亮显示
①给Component：listViewDelegate的Rectangle设置一个id：
listViewDelegateItem
②给当前行添加onClicked:{}效果
同样在MouseArea{}中实现：
③设置MusicList当前行高亮：
Ctrl+R，搜索邓紫棋，点击歌曲“于是”：
2.添加底边框
（1）在在MusicListView.qml的 listViewDelegate的Rectangle下添加Shape{}：
（2）导入以下模块：
import QtQuick.Shapes 1.12（3）设置Shape属性
Ctrl+R，搜索“山”：
同样，颜色等换完背景色再修改
四、解决搜索页面余留Bug
问题描述1.搜索关键字并翻页后，再次搜索页面并没有会回到第一页
问题描述2.翻页时序号最先加载出来而歌曲数据需要一小会后才加载完成
解决方法：
步骤①：“在MusicListView.qml中
在切换页面的函数loadMore传参时传入currentPage，默认为0：
调用时在参数currentPage的位置上传入index：
步骤②：在DetailSearchPageView.qml中：
在loadMore槽函数中拿出来使用：
给doSearch()函数也传入currentPage参数
在其中的onReply中也同样将currentPage赋值为0：
重新运行，即可将两个问题一并解决
其他优化：
①去掉搜索栏边框：
进入DetailSearchPageView.qml中，去除这两行：
②修改表格表头listViewHeader颜色：
并将其中文本5个Text{}的颜色改成白色：
如：
③将5个Text文本超出长度部分的内容用省略号放在文本中间：
如：
Ctrl+R运行并搜索关键字：
至此QT Quick QML项目音乐播放器第九部分----搜索音乐页面：列表分页、音乐列表操作按键、高亮及表底边框正式完结，感谢您的阅读！
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
12
0- 0
已为社区贡献7条内容
所有评论(0)