目錄

一、CommonPage界?設置和顯示

二、自定義ListItemBox

?三、支持hover效果

四、自定義VolumeTool

五、界面設置

六、頁面創建及彈出

七、繪制三角

---

一、CommonPage界面設置和顯示

void CommonPage::setCommonPageUI(const QString &title, const QString &image)
{ui->pageTittle->setText(title);ui->musicImageLabel->setPixmap(QPixmap(image));ui->musicImageLabel->setScaledContents(true);//setScaledContents(true)可以使圖片自適應控件的大小
}

?然后在qqmusic.cpp中的初始化函數中加：

void QQMusic::initUI()
{ui->likepage->setCommonPageUI("我喜歡", ":/images/ilikebg.png");ui->localPage->setCommonPageUI("本地?樂", ":/images/localbg.png");ui->recentPage->setCommonPageUI("最近播放", ":/images/recentbg.png");
}

小知識：

QT中設置圖片和文字的方法：

圖片：

ui->具體的QLabel->setPixmap(QPixmap(QString的地址));

文字：

ui->具體的QLabel->setText(QString的內容);

例如：

ui->btIcon->setPixmap(QPixmap(btIcon));
ui->btText->setText(content);

二、自定義ListItemBox

設置好如下格式：

?UI格式：

likeBtn:#likeBtn
{border:none;
}VIPLabel:#VIPLabel
{border:1px solid #1ECD96;
color:#1ECD96;
border-radius:2px;
}SQLabel:#SQLabel
{
border:1px solid #FF6600;
color:#FF6600;
border-radius:2px;
}

測試調用：?

void CommonPage::setCommonPageUI(const QString &title, const QString &image)
{ui->pageTittle->setText(title);ui->musicImageLabel->setPixmap(QPixmap(image));ui->musicImageLabel->setScaledContents(true);//setScaledContents(true)可以使圖片自適應控件的大小ListItemBox*listItemBox=new ListItemBox(this);QListWidgetItem*listWidgetItem=new QListWidgetItem(ui->pageMusicList);listWidgetItem->setSizeHint(QSize(ui->pageMusicList->width(),45));ui->pageMusicList->setItemWidget(listWidgetItem,listItemBox);}

這里的QListWidgetItem是創建ListWidget的一行

setItemWidge是將listItemBox加入到listWidgetItem中進行綁定

結果：

?三、支持hover效果

listitembox中的hover效果

// listitembox.h 新增
protected:void enterEvent(QEvent *event);void leaveEvent(QEvent *event);// listitembox.cpp 新增
void ListItemBox::enterEvent(QEvent *event)
{(void)event;setStyleSheet("background-color:#EFEFEF");
}
void ListItemBox::leaveEvent(QEvent *event)
{(void)event;setStyleSheet("");
}

四、自定義VolumeTool

適當修改格式：

五、界面設置

在volumetool.cpp中：

#include "volumetool.h"
#include "ui_volumetool.h"
#include <QGraphicsDropShadowEffect>VolumeTool::VolumeTool(QWidget *parent): QWidget(parent), ui(new Ui::VolumeTool)
{ui->setupUi(this);setWindowFlags(Qt::Popup | Qt::FramelessWindowHint| Qt::NoDropShadowWindowHint);// 在windows上，設置透明效果后，窗?需要加上Qt::FramelessWindowHint格式// 否則沒有控件位置的背景是??的// 由于默認窗?有陰影，因此還需要將窗?的原有的陰影去掉，窗?需要加上Qt::NoDropShadowWindowHintsetAttribute(Qt::WA_TranslucentBackground);// ?定義陰影效果QGraphicsDropShadowEffect* shadowEffect = new QGraphicsDropShadowEffect(this);shadowEffect->setOffset(0, 0);shadowEffect->setColor("#646464");shadowEffect->setBlurRadius(10);setGraphicsEffect(shadowEffect);// 給按鈕設置圖標ui->silenceBtn->setIcon(QIcon(":/images/volumn.png"));// ?量的默認??是20ui->outSlider->setGeometry(ui->outSlider->x(), 180 - 36 - 25, ui->outSlider->width(), 20);ui->sliderBtn->move(ui->sliderBtn->x(), ui->outSlider->y() - ui->sliderBtn->height()/2);ui->volumeRatio->setText("20%");
}VolumeTool::~VolumeTool()
{delete ui;
}

setIcon是設置按鈕圖標的函數

六、頁面創建及彈出

// qqmusic.h中新增
#include "volumetool.h"
VolumeTool* volumeTool;// qqmusic.cpp中新增
void QQMusic::initUi()
{
// ...
// 創建?量調節窗?對象并掛到對象樹
volumeTool = new VolumeTool(this);
}void QQMusic::on_volume_clicked()
{
// 先要調整窗?的顯?位置，否則該窗?在主窗?的左上?// 1. 獲取該按鈕左上?的圖標QPoint point = ui->volume->mapToGlobal(QPoint(0,0));// 2. 計算volume窗?的左上?位置// 讓該窗?顯?在?標點擊的正上?// ?標位置：減去窗?寬度的?半，以及?度恰巧就是窗?的左上?QPoint volumeLeftTop = point - QPoint(volumeTool->width()/2, volumeTool->height());// 微調窗?位置volumeLeftTop.setY(volumeLeftTop.y()+30);volumeLeftTop.setX(volumeLeftTop.x()+15);// 3. 移動窗?位置volumeTool->move(volumeLeftTop);// 4. 將窗?顯?出來volumeTool->show();
}

七、繪制三角

// volumetool.h中新增
void paintEvent(QPaintEvent *event);// volumetool.cpp中新增
#include <QPainter>void VolumeTool::paintEvent(QPaintEvent *event)
{(void)event;// 1. 創建繪圖對象QPainter painter(this);// 2. 設置抗鋸?painter.setRenderHint(QPainter::Antialiasing, true);// 3. 設置畫筆// 沒有畫筆時：畫出來的圖形就沒有邊框和輪廓線painter.setPen(Qt::NoPen);// 4. 設置畫刷顏?painter.setBrush(Qt::white);// 創建?個三?形QPolygon polygon;polygon.append(QPoint(30, 300));polygon.append(QPoint(70, 300));polygon.append(QPoint(50, 320));// 繪制三?形painter.drawPolygon(polygon);
}

效果展示：

大家多多支持~一鍵三連~~~