HMI-53-【多媒体】音乐播放器 2 3

Dreamlife
271 阅读5分钟

头图

HMI-53-【多媒体】音乐播放器 2

今天我们接着搞我们的音乐播放器，今天我把们昨天剩下的那些布局搞一搞，后面再实现细节，今天我们把下面的菜单和逻辑实现了，以及上次漏掉的右上角的子菜单按钮。

当前进度

本次新增实现内容

右上角菜单按钮，及按下弹出子菜单界面，内容为文本提示

下面的菜单来，点击最左侧 DL 的按钮，可以返回到主菜单，正常点击最右侧的返回按钮会返回到上一状态的界面(该功能暂未实现)。中间可以切换到对应的模块。

HMI-53-【多媒体】音乐播放器 2当前进度右上角按钮实现及菜单弹出控制下方菜单栏实现给按钮添加对应的操作添加两个TabWidget布局，一个用来放主界面，一个用来放菜单修改Tabwidget样式及位置大小第三阶段成果展示第二阶段成果展示第一阶段成果展示

关键字： HMI、Multifunction、Qt、qml、QQuickWidget

右上角按钮实现及菜单弹出控制

这些现在都是小儿科的内容了，全当流水账看吧。设置按钮样式代码如下

    ui->pushButton_nemubtn->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/menubtn.png);}"
                                          "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/menubtn_1.png);}");

逻辑控制代码如下：

/**
 * @brief MFD_Multimedia::on_pushButton_nemubtn_clicked
 * 打开子菜单
 */
void MFD_Multimedia::on_pushButton_nemubtn_clicked()
{
    if(ui->tabWidget_menu->isHidden())
    {
        ui->tabWidget_menu->show();
        ui->tabWidget_menu->setCurrentIndex(ui->tabWidget_main->currentIndex());
    }
    else
        ui->tabWidget_menu->hide();
}

原理很简单，就是判断菜单界面是否显示，如果没有就显示并切换菜单类型，已对应音乐、视频和图片不同的需求，不过后期肯定不会全部是实现，因为没有美术支持，如果显示就隐藏。

下方菜单栏实现

这个基本和上一篇上方菜单实现一直，弄几个按钮，设置一下样式。如下

image-20220416154913411

/**
 * @brief MFD_Multimedia::initBottomPushbutton
 * 设置下方按钮样式
 */
void MFD_Multimedia::initBottomPushbutton()
{
    ui->pushButton_menu->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/menu.png);}"
                                       "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/menu_1.png);}");
​
    ui->pushButton_return->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/return.png);}"
                                       "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/return_1.png);}");
​
    ui->pushButton_multimedia->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/multimedia.png);}"
                                             "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/multimedia_1.png);}");
​
    ui->pushButton_navigation->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/navigation_2.png);}"
                                             "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/navigation_1.png);}");
​
    ui->pushButton_radio->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/radio_2.png);}"
                                        "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/radio_1.png);}");
​
    ui->pushButton_phone->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/phone_2.png);}"
                                        "QPushButton:pressed{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/phone_1.png);}");
}

给按钮添加对应的操作

void MFD_Multimedia::on_pushButton_menu_clicked()
{
    emit signal_returnToMenu();
}
void MFD_Multimedia::on_pushButton_return_clicked()
{
    emit signal_return();
}
​
​
void MFD_Multimedia::on_pushButton_navigation_clicked()
{
    emit signal_ToNavigation();
}
​
​
void MFD_Multimedia::on_pushButton_multimedia_clicked()
{
​
}
​
​
void MFD_Multimedia::on_pushButton_radio_clicked()
{
    emit signal_ToRadio();
}
​
​
void MFD_Multimedia::on_pushButton_phone_clicked()
{
    emit signal_ToPhone();
}

添加两个TabWidget布局，一个用来放主界面，一个用来放菜单

image-20220416155222708

修改Tabwidget样式及位置大小

void MFD_Multimedia::initMainFramAndMenu()
{
    ui->tabWidget_main->tabBar()->hide();
    ui->tabWidget_main->setStyleSheet("QTabWidget::pane{border-top: 2px solid #00000000;}");
    ui->tabWidget_main->setGeometry(0,270,1920,670);
    ui->tabWidget_menu->tabBar()->hide();
    ui->tabWidget_menu->setStyleSheet("QTabWidget::pane{border-top: 2px solid #00000000;}");
    ui->tabWidget_menu->hide();
}

音乐信息

音乐信息，这个就没啥好说的了，就是三个label，如下图

image-20220416202142842

接口函数如下：

void MFD_MultiMedia_Music::setMusic(QString name)
{
    ui->label_music->setText(name);
}
​
void MFD_MultiMedia_Music::setSinger(QString signer)
{
    ui->label_singer->setText(signer);
}
​
void MFD_MultiMedia_Music::setAlbum(QString album)
{
    ui->label_album->setText(album);
}

音乐时间

音乐时间是两个label，一个是设置当前播放时间，一个是歌曲总时间。UI就不放了，直接放接口，代码如下

void MFD_MultiMedia_Music::setTimeGo(QString time)
{
    ui->label_time_Go->setText(time);
}
​
void MFD_MultiMedia_Music::setTimeDuration(QString time)
{
    ui->label_time_Go->setText(time);
}

上一曲下一曲

上一曲下一曲就是两个按钮，和面会发送信号，UI就是两个Button，代码如下：

void MFD_MultiMedia_Music::on_pushButton_next_clicked()
{
    emit signal_MusicNext();
}
​
​
void MFD_MultiMedia_Music::on_pushButton_previous_clicked()
{
    emit signal_MusicPrevious();
}

播放按钮

界面上就是一个Button，操作代码如下：

void MFD_MultiMedia_Music::on_pushButton_palyOrPuse_clicked()
{
    if(mPlayFlag)
    {
        mTimerPlayRotatePic->stop();
        ui->pushButton_palyOrPuse->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/play.png);}");
    }
    else
    {
        mTimerPlayRotatePic->start(1000/60);
        ui->pushButton_palyOrPuse->setStyleSheet("QPushButton{border-image: url(:/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/pause.png);}");
    }
​
    mPlayFlag = !mPlayFlag;
}

函数一个是操作播放标志位，一部分是设置按钮样式，还有一部分就是开启和关闭 动画的Timer。

转盘动画

转盘动画就是绘制一个图片，通过改变painter 的属性来旋转。后面是不是可以使用动画呢。代码如下：

void MFD_MultiMedia_Music::drawPicGoRotate(int angle)
{
    QPainter painter (ui->label_timeGoPic_rotate);
    painter.setRenderHint((QPainter::SmoothPixmapTransform));
    painter.setRenderHint(QPainter::HighQualityAntialiasing);
    painter.translate(ui->label_timeGoPic_rotate->width()/2,ui->label_timeGoPic_rotate->height()/2);
    painter.save();
    painter.rotate(angle);
    painter.drawPixmap((0-ui->label_timeGoPic_rotate->width()/2),(0-ui->label_timeGoPic_rotate->height()/2),ui->label_timeGoPic_rotate->width(),ui->label_timeGoPic_rotate->height(),QPixmap(":/Multimedia/Resources/MultifunctionDisplay/Multimedia/Music/timego_back_ratate_poointer.png"));
    painter.restore();
​
}

绘制进度条

就是绘制个圆弧，代码如下：

void MFD_MultiMedia_Music::drawTimeLine(int time)
{
    QPainter painter (ui->label_timeGoPic);
    painter.setRenderHint((QPainter::SmoothPixmapTransform));
    painter.setRenderHint(QPainter::HighQualityAntialiasing);
    painter.translate(ui->label_timeGoPic->width()/2,ui->label_timeGoPic->height()/2);
    painter.setPen(QPen(QColor(255,161,53),8));
    painter.save();
    painter.drawArc((0-ui->label_timeGoPic->width()/2)+4,(0-ui->label_timeGoPic->height()/2)+4,ui->label_timeGoPic->width()-8,ui->label_timeGoPic->height()-8,90*16,time*16);
    painter.restore();
}

今天就到这里了。

第三阶段成果展示

目前已完成液晶仪表三种模式的初步显示，小模块后期根据精力更新了，主要还得找美术来搞资源，自己能力不够。暂未跟新计划。展示如下：

[video(video-yznBr6e3-1648369267384)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 3.0)]

B站链接：www.bilibili.com/video/BV1WS…

第二阶段成果展示

目前以完成HUD界面及接口开发，液晶仪表舒适模式和运动模式的开发。展示如下：

[video(video-2AqJ88TY-1645273728489)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 2.0)]

B站链接：www.bilibili.com/video/BV1aq…

第一阶段成果展示

目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：

[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 1.0))]

B站链接：www.bilibili.com/video/BV1qJ…

说明：

本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。

多媒体部分是来自吉利博瑞2017旗舰版界面所有权和解释权都归吉利汽车所有。

设计图的所有权和解释权都归吉利汽车所有。

本项目所有资源文件均由**打不死的小海**复刻制作。

本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。

本项目仅限学习交流、禁止商业使用。

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝