目录

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

效果展示：

大家多多支持~一键三连~~~