一、RecBox中btUp和btDown按钮clicked处理

选中左右键（btUp和btDown按钮）然后右击转到槽->click()

void RecBox::on_btUp_clicked()
{}void RecBox::on_btDown_clicked()
{}

二、imageList中图片分组

// recbox.h 中新增
int currentIndex; // 标记当先显⽰第⼏组图⽚和推荐信息
int count; // 标记imageList中元素按照col分组总数
// recbox.cpp 中新增
void RecBox::initRecBoxUi(QJsonArray data, int row)
{// ...imageList = data;//从这里开始往下面添加// 默认显⽰第0组currentIndex = 0;// 计算总共有⼏组图⽚，ceil表⽰向上取整count = ceil(imageList.size()/col);// 在RecBox控件添加RecBoxItem
createRecBoxItem();
}

接下来写左移和右移的函数，轮番播放

void RecBox::on_btUp_clicked()
{currentIndex--;if(currentIndex<0){currentIndex=count-1;}createRecBoxItem();
}void RecBox::on_btDown_clicked()
{currentIndex++;if(currentIndex>=count){currentIndex=0;}createRecBoxItem();
}

现在有个问题是当切换页面时进来的元素和原来的元素会堆积在一起，没有删除原先recboxitem的元素

三、除去重复元素

void RecBox::createRecBoxItem()
{//添加元素之前先抹去之前的元素布局QList<RecBoxItem*> RecUpList=ui->recListUp->findChildren<RecBoxItem*>();for(auto e:RecUpList){ui->recListUpHLayout->removeWidget(e);delete e;}QList<RecBoxItem*> RecDownList=ui->recListUp->findChildren<RecBoxItem*>();for(auto e:RecDownList){ui->recListDownHLayout->removeWidget(e);delete e;}
//创建元素代码………………
}

四、按照分组计算imageList中元素偏移

 //接上面的代码，在createrecboxitem里// 创建RecBoxItem对象，往RecBox中添加int index=0;for(int i = currentIndex*col; i < col+currentIndex*col; ++i){RecBoxItem* item = new RecBoxItem();// 设置⾳乐图⽚与对应⽂本QJsonObject obj = imageList[i].toObject();item->setText(obj.value("text").toString());item->setImage(obj.value("path").toString());if(index >= col/2 && row == 2){ui->recListDownHLayout->addWidget(item);}else{ui->recListUpHLayout->addWidget(item);}index++;

int i = currentIndex*col 这里的初始值应该是每组偏移量的值，currentIndex为当前界面位置，col是每组的item数目，这时候的i已经不是表示的从0开始的item数目了，因此需要单独设立一个index变量用来计数和判断它和col/2之前的大小。

五、自定义CommonPage

新增加⼀个设计界面，objectName修改为CommonPage，geometry的宽⾼修改为800*500。

① 拖拽⼀个QLabel、两个Widget和⼀个List View控件到CommonPage中，objectName从上往下依

次修改为pageTittle、musicPlayBox、listLabelBox、pageMusicList，然后选中CommonPage点

击垂直布局，将CommonPage的margin和Spacing修改为0。

pageTittle的minimumSize和maximumSize的⾼度修改为30。

musicPlayBox的minimumSize和maximumSize的⾼度修改为150。

listLabelBox的minimumSize和maximumSize的⾼度修改为40。

② 将pageTittle的文本内容修改为"本地音乐"

③ musicPlayBox中

拖拽⼀个QLabel，objectName修改为musicImageLabel，minimumSize和maximumSize的宽度

修改为150

拖拽⼀个Widget，objectName修改为playAll，minimumSize和maximumSize的宽度修改为120，

在其内部拖拽 ⼀个PushButton和Vertical Space(即垂直弹簧)，将按钮的objectName修改为

playAllBtn，minimumSize和 maximumSize的宽和高修改为100*30，⽂本内容修改为"播放全

部"，然后选中playAll点击垂直布局。

拖拽⼀个Horizontal Spacer到CommonPage中，放在playAll之后。

然后选中musicPlayBox，点击水平布局，将margin和spacing设置为0.

④ listLabelBox中

拖拽三个QLabel，内容依次修改为：歌曲名称、歌手名称、专辑名称，objectName从左往右依次

修改为： musicNameLabel、musicSingerLabel、musicAlbumLabel

然后选中musicPlayBox，点击⽔平布局，将margin和spacing设置为0.

⑤ 选中List View，右键单击弹出菜单中选择"变形为"，选择QListWidget

选中QQMusic页面，将stackedWidget中我喜欢、本地下载、最近播放对应的页面提升为

CommonPage，页面就处理完成。

按钮格式：

#playAllBtn
{background-color:#E3E3E3;border-radius:10px;
}
#playAllBtn:hover
{background-color:#1ECD97;
}

目前界面情况：

 

关注三连我尽快更新哦~~~