QT项目 -仿QQ音乐的音乐播放器(第五节)

一、CommonPage界⾯设置和显示

二、自定义ListItemBox

三、支持hover效果

四、自定义VolumeTool

五、界面设置

六、页面创建及弹出

七、绘制三角

一、CommonPage界面设置和显示

cpp 复制代码

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中的初始化函数中加：

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格式：

cpp 复制代码

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

测试调用：

cpp 复制代码

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效果

cpp 复制代码

// 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

① 生成⼀个QT设计师界面，objectName命名为VolumeTool，geometry的宽⾼修改为100*350。
② 拖拽⼀个Widget到VolumeTool中，objectName修改为volumeWidget，geometry修改为：

(10,10), 80\*300

拖拽⼀个QPushButton到volumeWidget，objectName修改为silenceBtn，mimimumSize和
maximumSize的宽⾼修改为80*45
拖拽⼀个QLabel到volumeWidget，objectName修改为volumeRatio，mimimumSize和
maximumSize的高修改为30，QLabel的alignment属性修改为水平和垂直居中。
拖拽⼀个QWidget到volumeWidget，objectName修改为sliderBox。geometry修改为： $(0,0), 80\*225$
③ sliderBox内部：
拖拽⼀个QFrame，objectName修改为inSlider，geometry修改为 $(38, 25), 4\*180$ 。
拖拽⼀个QFrame，objectName修改为outSlider，geometry修改为 $(38, 25), 4\*180$ 。
拖拽⼀个QPushButton，objectName修改为sliderBtn，geometry修改为 $(33, 20), 14\*14$ ，
mimimumSize和 maximumSize的宽高14*14。

适当修改格式：

五、界面设置

在volumetool.cpp中：

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::NoDropShadowWindowHint
    setAttribute(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"));
    // ⾳量的默认⼤⼩是20
    ui->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类中需要添加VolumeTool的对象，在initUi中new该类的对象。主界面中⾳量调节按钮添加clicked槽函数。

cpp 复制代码

// 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();
}

七、绘制三角

cpp 复制代码

// 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);
}

效果展示：

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