Qt编写网易云界面 （9） -----歌词界面、部分功能实现

最近就是就是完成一些小功能，歌词界面，部分按钮的点击事件，歌词列表等；

效果如图：

视频页面

歌单列表：

歌词界面：

点击歌曲详情页面：

歌曲列表代码listform：

#ifndef LISTFORM_H
#define LISTFORM_H
#include <QVector>
#include <QWidget>
#include <QString>
namespace Ui {
class ListForm;
}

class ListForm : public QWidget
{
    Q_OBJECT

public:
    explicit ListForm(QWidget *parent = nullptr);
    ~ListForm();

    void setdata();
    QVector<QString> data;
    int pos=0;
signals:
    void mysig();

protected:
    void leaveEvent(QEvent *event);

private slots:
    void on_listWidget_currentRowChanged(int currentRow);

private:

    Ui::ListForm *ui;
};

#endif // LISTFORM_H

listform.cpp：

#include "listform.h"
#include "ui_listform.h"
#include <QDebug>
ListForm::ListForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::ListForm)
{
    ui->setupUi(this);
}

void ListForm::setdata()
{
    QStringList s;
    for(int i=0;i<data.size();i++)
    {
        QString x=data[i];
        QStringList a=x.split(".");
        s.push_back(a[0]);
    }
    ui->listWidget->addItems(s);
}

ListForm::~ListForm()
{
    delete ui;
}
void ListForm::leaveEvent(QEvent *event)
{
    Q_UNUSED(event);
    this->close();
}

void ListForm::on_listWidget_currentRowChanged(int currentRow)
{
    pos = currentRow;
    emit mysig();
}

歌曲界面的代码参考某个大佬的实现：

lyricwidget.h:

#ifndef LYRICWIDGET_H
#define LYRICWIDGET_H

#include<QWidget>
#include<QLabel>
#include<QFile>
#include<vector>
#include <QMouseEvent>
#include <QMediaPlayer>
#include <QMediaPlaylist>
#include <QPainter>
using namespace std;

//表示一行歌词（一个时间点+对应的歌词文本）
class LyricLine
{
public:
    qint64 time;
    QString text;
    LyricLine(qint64 time, QString text):time(time), text(text){}
};

bool operator <(const LyricLine& A, const LyricLine& B);

namespace Ui {
class LyricWidget;
}

class LyricWidget : public QWidget
{
    Q_OBJECT

    //储存所有歌词
    vector<LyricLine> lines;
public:
    explicit LyricWidget(QWidget *parent = nullptr);
    ~LyricWidget();

    //将歌词文件的内容处理为歌词结构的QList
    bool process(QString filePath);
    //根据时间找到对应位置的歌词
    int getIndex(qint64 position);
    //显示当前播放进度的歌词
    void showcontent(qint64 position);
    //根据下标获得歌词内容
    QString getLyricText(int index);
    //清空歌词Label
    void clear();

    LyricWidget* l;
    QMediaPlaylist  *playlist;
    int pos;
    QVector<QString> music;

    void setlrc(LyricWidget* l,QMediaPlayer  *player,QMediaPlaylist  *playlist,int pos,QVector<QString> music);
    //更新歌词
    void updateSongLrc(qint64 position);
    void updateSongLyclist();


protected:
    //绘制背景函数
    void paintEvent(QPaintEvent* event);
    //鼠标按下
    void mousePressEvent(QMouseEvent* event);
    //鼠标移动
    void mouseMoveEvent(QMouseEvent* event);
    //鼠标释放
    void mouseReleaseEvent(QMouseEvent* event);

private:
    Ui::LyricWidget *ui;
    QPoint last;
};

#endif // LYRICWIDGET_H

lyricwidget.cpp:

#include "LyricWidget.h"
#include "ui_lyricwidget.h"

#include <algorithm>
#include <QTextCodec>
#include<QDebug>
#include <QPainter>
LyricWidget::LyricWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::LyricWidget)
{
    ui->setupUi(this);
    clear();//清空用于排版时的测试内容(.ui文件中)
    ui->label_i->setStyleSheet("color:LightSkyBlue");
    //首先去除自带的边框
    this->setWindowFlag(Qt::FramelessWindowHint);
    //背景透明
    setAttribute(Qt::WA_TranslucentBackground);
}

LyricWidget::~LyricWidget()
{
    delete ui;
}

void LyricWidget::setlrc(LyricWidget* l,QMediaPlayer  *player,QMediaPlaylist  *playlist,int pos,QVector<QString> music)
{
    connect(player,&QMediaPlayer::positionChanged,this,&LyricWidget::updateSongLrc);//随时间变化歌词
    l->show();
    this->l=l;
    this->pos=pos;
    this->playlist=playlist;
    this->music=music;
    connect(playlist,&QMediaPlaylist::currentMediaChanged,this,&LyricWidget::updateSongLyclist);//歌曲变化就查找和提取歌词
}
void LyricWidget::updateSongLyclist()
{
    int index=playlist->currentIndex();//获取当前位置
    //歌名
    QString songname_daihouzui=music[index];//提取在当前位置的文件名
    qDebug() << songname_daihouzui;
    QStringList songnamelist = songname_daihouzui.split(".");//QString字符串分割函数
    QString songname=songnamelist[0];
    qDebug()<<"歌词歌曲名："<<songname;
    QString lycpath="D:/mycode/qt_code/My_WYY/bin/music/" +songname+".lrc";
    l->process(lycpath);
}
void LyricWidget::updateSongLrc(qint64 position)//随时间变化而变化显示歌词
{
    l->showcontent(position);//更新歌词位置
}
void LyricWidget::mousePressEvent(QMouseEvent *event)
{
    //获取title widget 的高度，这里固定为60px
    int titleHeight = ui->layoutWidget->height();

    if(event->y() <titleHeight)
    {
        last = event->globalPos(); //获取到按压的位置
    }
}

void LyricWidget::mouseMoveEvent(QMouseEvent *event)
{
    int titleHeight = ui->layoutWidget->height();
    if(event->y() <titleHeight)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        last = event->globalPos();
        this->move(this->x()+dx,this->y()+dy);
    }
}

void LyricWidget::mouseReleaseEvent(QMouseEvent *event)
{
    int titleHeight = ui->layoutWidget->height();
    if(event->y() <titleHeight)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        this->move(this->x()+dx,this->y()+dy);
    }
}

void LyricWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.fillRect(rect(), QColor(0, 0, 0, 0));  // 使用透明色填充背景
    // 其他绘制操作...
}

//重载比较（歌词按时间排序）
bool operator <(const LyricLine& A, const LyricLine& B)
{
    return A.time<B.time;
}

bool LyricWidget::process(QString filePath)
{
    QFile lyricFile(filePath);
    //qDebug() << filePath<<"111";
    lyricFile.open(QFile::ReadOnly);
    //QString content(QString::fromLocal8Bit(lyricFile.readAll()));
    QString content(lyricFile.readAll());
    qDebug()<<"歌词\n"<<content;
    lyricFile.close();

    //先清空歌词
    lines.clear();

    const QRegExp rx("\\[(\\d+):(\\d+(\\.\\d+)?)\\]"); //用来查找时间标签的正则表达式

    // 步骤1
    int pos = rx.indexIn(content);//返回第一个匹配项的位置，如果没有匹配项则返回-1。
    if (pos == -1) {
        return false;
    }
    else {
        int lastPos;//
        QList<int> timeLabels;//时间标签
        do {
            // 步骤2
            timeLabels << (rx.cap(1).toInt() * 60 + rx.cap(2).toDouble()) * 1000;
            lastPos = pos + rx.matchedLength();//返回最后一个匹配字符串的长度，如果没有匹配则返回-1
            pos = rx.indexIn(content, lastPos);
            if (pos == -1) {
                QString text = content.mid(lastPos).trimmed();
                foreach (const int& time, timeLabels)
                    lines.push_back(LyricLine(time, text));
                break;
            }
            // 步骤3
            QString text = content.mid(lastPos, pos - lastPos);
            if (!text.isEmpty()) {
                foreach (const int& time, timeLabels)
                    lines.push_back(LyricLine(time, text.trimmed()));
                timeLabels.clear();
            }
        }
        while (true);
        // 步骤4
        stable_sort(lines.begin(), lines.end());//排序
    }
    if (lines.size()) {
        return true;
    }
    return false;
}

int LyricWidget::getIndex(qint64 position)//获取歌词位置
{
    if(!lines.size()){
        return -1;//如果没歌词
    }
    else{
        if(lines[0].time>=position){
            return 0;
        }
    }
    int i=1;
    for(i=1;i<lines.size();i++){
        if(lines[i-1].time<position && lines[i].time>=position){
            return i-1;
        }
    }
    return lines.size()-1;
}

void LyricWidget::showcontent(qint64 position)//显示当前播放进度的歌词
{
    int index=getIndex(position);
    if(index==-1){
        //ui->label_3i->setText("");
        //ui->label_2i->setText("");
        ui->label_1i->setText("");
        ui->label_i->setText(u8"当前歌曲无歌词");
        ui->label_i1->setText("");
        //ui->label_i2->setText("");
        //ui->label_i3->setText("");
    }else{
        //ui->label_3i->setText(getLyricText(index-3));
        //ui->label_2i->setText(getLyricText(index-2));
        ui->label_1i->setText(getLyricText(index-1));
        ui->label_i->setText(getLyricText(index));
        ui->label_i1->setText(getLyricText(index+1));
        //ui->label_i2->setText(getLyricText(index+2));
        //ui->label_i3->setText(getLyricText(index+3));
    }
}

QString LyricWidget::getLyricText(int index)//根据下标获得歌词内容
{
    if(index<0 || index>=lines.size()){
        return "";
    }else{
        //qDebug()<<"输出歌词："<<lines[index].text;
        return lines[index].text;
    }
}

void LyricWidget::clear()
{
    //ui->label_3i->setText("");
    //ui->label_2i->setText("");
    ui->label_1i->setText("");
    ui->label_i->setText("");
    ui->label_i1->setText("");
    //ui->label_i2->setText("");
    //ui->label_i3->setText("");
}

mv界面就是简单实现了一下，详细界面也是简单实现点击事件，后续慢慢实现功能及美化。

本栏目推荐文章
• 小程序开发：完善新增和编辑所思所想功能
• Unity 获取当前系统时间并在UI界面中显示
• Windows 10 中，可以使用 PowerShell 添加打印和文件服务的角色功能组件，包括 Internet 打印客户端、LPD 打印服务和 LPR 端口监视器 PowerShell 添加打印机并创建新的 LPR 端口。以下是添加打印机和创建新端口的 PowerShell 命令在 Windows 10 中，可以使用 PowerShell 添加 LPR 兼容打印机。
• MapOnline在线地图插件升级——修复部分地图不能使用的问题
• 解决vite 文件的部分热更新问题
• 世微AP630X地摊灯 手电筒方案 可充电多功能LED灯
• 2024年最佳免费简历编辑工具，全功能完全免费使用！
• 金融CRM功能解析，以及常见应用场景
• CRM系统如何帮助销售管理？有哪些销售管理功能？
• 销售团队如何利用CRM系统实现业绩增长？CRM线索管理功能有什么用？

界面 功能 部分 歌词界面 功能 部分 歌词 runtimesetting loadrunner界面 部分 部分 进程 界面 只有 防火墙 部分 功能window 部分 功能linux elementui源码 界面 功能 新功能devexpress组件 界面 界面 目标 功能 文件 纲要 功能 部分modbus 计算器 界面 功能 网页