码迷,mamicode.com
首页 > 其他好文 > 详细

Qt-网易云音乐界面实现-3 音乐名片模块的实现

时间:2018-07-04 01:09:51      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:构造   rgb   sig   sheet   res   分享   lse   没有   icp   

技术分享图片

 

这个模块其实我是不知道该叫什么的,暂时就叫做音乐名片模块吧,这可以看到,这个模块简单的显示以下信息。

1. 歌曲名称

2. 歌曲歌唱者

3. 歌曲封面

4. 喜欢歌曲的按钮

5. 分享歌曲的按钮

6. 全屏显示歌曲信息的按钮(在歌曲封面上面)

看下对比图

 

技术分享图片

 

正版的动图有点大了,演示不了了,大家可以自己体验一下网易云音乐的这个动作。

下面说说我是怎么实现这个小小的音乐名牌的。

1. 歌曲名称 就是一个简单的label,这里还没有处理完成,只是简单的设置了样式,但是没有做字符超长检测,在后面会加上

2. 歌手信息,同一

3 歌曲封面,就是在一个label上面放个图片

4 喜欢按钮,就是普通的pushbutton,不过是两套资源

5 分享按钮,普通的pushbutton按钮

6 全屏显示按钮,普通的pushbutton按钮,只不过默认的资源的透明

上下这个音乐模块的代码。

#ifndef MUSICFORM_H
#define MUSICFORM_H

#include <QWidget>
#include <QPainter>
#include <QPaintEvent>
#include <QPushButton>
namespace Ui {
class MusicForm;
}

class MusicForm : public QWidget
{
    Q_OBJECT

public:
    explicit MusicForm(QWidget *parent = 0);
    ~MusicForm();


    void set_Music_Picture(QString picPath);
protected slots:
    void slot_show_Normal();
signals:
    void full_show(bool full_show_state);       //音乐模块全屏显示
protected:
    void paintEvent(QPaintEvent* event);

private slots:
    void on_pushButton_music_picture_clicked();

    void on_pushButton_like_clicked();

    void on_pushButton_share_clicked();

private:
    Ui::MusicForm *ui;



    bool music_Like_State = false;
    bool full_Show_State = false;



    QPushButton *btn_Show_Normal = NULL;
};

#endif // MUSICFORM_H

  

#include "musicform.h"
#include "ui_musicform.h"

/*
 * 构造函数
 */
MusicForm::MusicForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MusicForm)
{
    ui->setupUi(this);
    if(music_Like_State == false)
    {
        ui->pushButton_like->setStyleSheet("QPushButton{border-image:url(images/musicform/btn_like_n.png);}"
                                           "QPushButton::hover{border-image:url(images/musicform/btn_like_h.png);}"
                                           "QPushButton::pressed{border-image:url(images/musicform/btn_like_n.png);}");
    }
}

MusicForm::~MusicForm()
{
    delete ui;
}
/*
 * 这是音乐头像
 */
void MusicForm::set_Music_Picture(QString picPath)
{
    QString qss = "QLabel{border-image:url("+picPath+");}";
    ui->label_music_picture->setStyleSheet(qss);
}
/*
 * 正常显示,把我的按钮还给我
 */
void MusicForm::slot_show_Normal()
{

    emit full_show(false);
    ui->label_music_singer->show();
    ui->label_music_name->show();
    ui->label_music_picture->show();
    ui->pushButton_like->show();
    ui->pushButton_music_picture->show();
    ui->pushButton_share->show();


    btn_Show_Normal->hide();
}
/*
 * 绘制背景函数
 */
void MusicForm::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter_mainback(this);
    painter_mainback.setPen(Qt::NoPen);
    painter_mainback.setBrush(QColor(25,27,31));
    painter_mainback.drawRect(0,0,this->width(),this->height());
}
/*
 * 全屏按钮按下
 */
void MusicForm::on_pushButton_music_picture_clicked()
{
    if(full_Show_State == false)
    {
        emit full_show(true);
        ui->label_music_singer->hide();
        ui->label_music_name->hide();
        ui->label_music_picture->hide();
        ui->pushButton_like->hide();
        ui->pushButton_music_picture->hide();
        ui->pushButton_share->hide();


        if(btn_Show_Normal == NULL)
        {
            btn_Show_Normal = new QPushButton(this);
            btn_Show_Normal->setGeometry(50,50,100,100);
            btn_Show_Normal->setText("缩回去");
            btn_Show_Normal->show();
            connect(btn_Show_Normal,&QPushButton::clicked,this,&MusicForm::slot_show_Normal);
        }
        else
        {
            btn_Show_Normal->setGeometry(50,50,100,100);
            btn_Show_Normal->setText("缩回去");
            btn_Show_Normal->show();
        }

    }
}
/*
 * 喜欢按钮
 */
void MusicForm::on_pushButton_like_clicked()
{
    if(music_Like_State == false)
    {
        music_Like_State = true;
        ui->pushButton_like->setStyleSheet("QPushButton{border-image:url(images/musicform/btn_unlike_n.png);}"
                                           "QPushButton::hover{border-image:url(images/musicform/btn_unlike_h.png);}"
                                           "QPushButton::pressed{border-image:url(images/musicform/btn_unlike_n.png);}");

    }
    else
    {
        music_Like_State = false;
        ui->pushButton_like->setStyleSheet("QPushButton{border-image:url(images/musicform/btn_like_n.png);}"
                                           "QPushButton::hover{border-image:url(images/musicform/btn_like_h.png);}"
                                           "QPushButton::pressed{border-image:url(images/musicform/btn_like_n.png);}");
    }
}
/*
 * 分享按钮
 */
void MusicForm::on_pushButton_share_clicked()
{

}

  

以上分别为音乐模块的头文件和cpp,其中还有部分接口没有流出来,等后期有机会实现其功能的时候在做接口。

在主窗口中,主要有两部分功能,

1. 创建这个音乐模块

2. 改变音乐模块的显示方式

代码如下

//初始化音乐模块
    musicform = new MusicForm(this);
    connect(musicform,&MusicForm::full_show,this,&MainWindow::slot_musicform_resize);
    musicform->setGeometry(0,565,200,55);
    musicform->set_Music_Picture("./images/pretty_girl.png");
    musicform->show();

  

/*
 * 改变音乐模块显示方式
 */
void MainWindow::slot_musicform_resize(bool full_show_state)
{
    if(full_show_state == true)
    {
        if(musicform != NULL)
        {
            musicform->setGeometry(0,50,1022,570);
        }
    }
    else
    {
        if(musicform != NULL)
        {
            musicform->setGeometry(0,565,200,55);
        }
    }

}

  

最后附上今天用到的QSS

/*音乐模块全屏按钮*/
QPushButton#pushButton_music_picture
{
	border-image:url(images/musicform/btn_music_picture_n.png);
}
QPushButton::hover#pushButton_music_picture
{
	border-image:url(images/musicform/btn_music_picture_h.png);
}
QPushButton::pressed#pushButton_music_picture
{
	border-image:url(images/musicform/btn_music_picture_n.png);
}

/*音乐模块分享按钮*/
QPushButton#pushButton_share
{
	border-image:url(images/musicform/btn_share_n.png);
}
QPushButton::hover#pushButton_share
{
	border-image:url(images/musicform/btn_share_h.png);
}
QPushButton::pressed#pushButton_share
{
	border-image:url(images/musicform/btn_share_n.png);
}
/*音乐模块歌名*/
QLabel#label_music_name
{
	color: rgb(255, 255, 255);
}
/*音乐模块歌词*/
QLabel#label_music_singer
{
	color: rgb(102, 102, 102);
}
/*主窗口分割条*/
QLabel#label_part
{
	border-image:url(images/lable_part.png);
}

  技术分享图片

Qt-网易云音乐界面实现-3 音乐名片模块的实现

标签:构造   rgb   sig   sheet   res   分享   lse   没有   icp   

原文地址:https://www.cnblogs.com/DreamDog/p/9261144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!