一、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;
}

目前界面情況：

?

關注三連我盡快更新哦~~~?