qt编写网易云界面（9）----歌单模块

最新推荐文章于 2024-03-10 20:55:50 发布
最新推荐文章于 2024-03-10 20:55:50 发布
阅读量1k 收藏 4
点赞数 3
分类专栏： qt（QSS）进步空间 qt网易云专栏 文章标签： qt 开发语言 qss 网易云
请转载请声明转载的地址
本文链接：https://blog.csdn.net/weixin_42126427/article/details/121240498
版权

 今天把歌单模块给弄完了，这个模块还是比较简单的，就是基本的qss 贴图。以及QButtonGroup的基本使用，实现单点按钮的功能。

计划把后面几个模块写完成后，上传代码，希望喜欢我的可以关注，第一时间可以拿到源码。

话不多说，先上我们目标的网易云的界面：

 点击对应的按钮会又不同的内容出现，这里还是非常简单的，我实现的效果：

 动态图效果：

 主要的qss 代码：

/*歌单部分*/
QWidget#picTitle
{
	border-image:url(images/pictureMusic/huayu0.png);
}

QWidget#widMus1
{
	border-image:url(images/pictureMusic/huayu1.png);
}

QWidget#widMus2
{
	border-image:url(images/pictureMusic/huayu2.png);
}

QWidget#widMus3
{
	border-image:url(images/pictureMusic/huayu3.png);
}

QWidget#widMus4
{
	border-image:url(images/pictureMusic/huayu4.png);
}

QPushButton#ptnChange
{
	 border:1px solid rgb(216,216,216); 
	 color:rgb(55,55,55);
	 border-radius:15px;
}

QPushButton::hover#ptnChange
{
	 border:1px solid rgb(216,216,216); 
	 background:rgb(242,242,242);
	 color:rgb(55,55,55);
	 border-radius:15px;
}
/*华语按钮*/
QPushButton#ptn0
{
	border:0px;
	color:rgb(103,103,103);
	border-radius:10px;
}

QPushButton::hover#ptn0
{
	border:0px;
	background:rgb(253,245,245);
	border-radius:10px;
}

QPushButton::checked#ptn0
{
	border:0px;
	background:rgb(253,245,245);
	color:rgb(236,65,65);
	border-radius:10px;
}

/*流行按钮*/
QPushButton#ptn1
{
	border:0px;
	color:rgb(103,103,103);
	border-radius:10px;
}

QPushButton::hover#ptn1
{
	border:0px;
	background:rgb(253,245,245);
	border-radius:10px;
}

QPushButton::checked#ptn1
{
	border:0px;
	background:rgb(253,245,245);
	color:rgb(236,65,65);
	border-radius:10px;
}

/*摇滚按钮*/
QPushButton#ptn2
{
	border:0px;
	color:rgb(103,103,103);
	border-radius:10px;
}

QPushButton::hover#ptn2
{
	border:0px;
	background:rgb(253,245,245);
	border-radius:10px;
}

QPushButton::checked#ptn2
{
	border:0px;
	background:rgb(253,245,245);
	color:rgb(236,65,65);
	border-radius:10px;
}

/*民谣按钮*/
QPushButton#ptn3
{
	border:0px;
	color:rgb(103,103,103);
	border-radius:10px;
}

QPushButton::hover#ptn3
{
	border:0px;
	background:rgb(253,245,245);
	border-radius:10px;
}

QPushButton::checked#ptn3
{
	border:0px;
	background:rgb(253,245,245);
	color:rgb(236,65,65);
	border-radius:10px;
}

/*电子按钮 与剩下的部分*/
QPushButton#ptn4,#ptn5,#ptn6,#ptn7,#ptn8,#ptn9
{
	border:0px;
	color:rgb(103,103,103);
	border-radius:10px;
}

QPushButton::hover#ptn4,::hover#ptn5,::hover#ptn6,
::hover#ptn7,::hover#ptn8,::hover#ptn9
{
	border:0px;
	background:rgb(253,245,245);
	border-radius:10px;
}

QPushButton::checked#ptn4,::checked#ptn5,::checked#ptn6,
::checked#ptn7,::checked#ptn8,::checked#ptn9
{
	border:0px;
	background:rgb(253,245,245);
	color:rgb(236,65,65);
	border-radius:10px;
}

项目代码部分：

void AllMain::setButtonMus()
{
    pButtonMus = new QButtonGroup(this);
    pButtonMus->addButton(ui->ptn0,0);
    pButtonMus->addButton(ui->ptn1,1);
    pButtonMus->addButton(ui->ptn2,2);
    pButtonMus->addButton(ui->ptn3,3);
    pButtonMus->addButton(ui->ptn4,4);
    pButtonMus->addButton(ui->ptn5,5);
    pButtonMus->addButton(ui->ptn6,6);
    pButtonMus->addButton(ui->ptn7,7);
    pButtonMus->addButton(ui->ptn8,8);
    pButtonMus->addButton(ui->ptn9,9);
    pButtonMus->setExclusive(true);
    pButtonMus->button(0)->setChecked(true);

    connect(pButtonMus, QOverload<int>::of(&QButtonGroup::buttonClicked),
          [=](int id){
          setSourceMus(id);
    });

}


void AllMain::setSourceMus(int id)
{
    QString str = pButtonMus->button(id)->text();
    ui->ptnChange->setText(str+" >");
    switch (id)
    {
    //0 华语
     case 0:
        {
            QList<QString> arrHuayu;
            for (int i = 0; i<5;i++) {
                arrHuayu.append(QString::asprintf("./images/pictureMusic/huayu%d.png",i));
            }
            QString style = "QWidget#picTitle{border-image:url("+arrHuayu[0]+");}";
            ui->picTitle->setStyleSheet(style);
            style = "QWidget#widMus1{border-image:url("+arrHuayu[1]+");}";
            ui->widMus1->setStyleSheet(style);
            style = "QWidget{border-image:url("+arrHuayu[2]+");}";
            ui->widMus2->setStyleSheet(style);
            style = "QWidget{border-image:url("+arrHuayu[3]+");}";
            ui->widMus3->setStyleSheet(style);
            style = "QWidget{border-image:url("+arrHuayu[4]+");}";
            ui->widMus4->setStyleSheet(style);
            break;
        }
    //流行
    case 1:
    {
        QList<QString> arrLiuxing;
        for (int i = 0; i<5;i++) {
            arrLiuxing.append(QString::asprintf("./images/pictureMusic/liuxing%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrLiuxing[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrLiuxing[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLiuxing[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLiuxing[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLiuxing[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
    //摇滚
    case 2:
    {
        QList<QString> arrYaogun;
        for (int i = 0; i<5;i++) {
            arrYaogun.append(QString::asprintf("./images/pictureMusic/yaogun%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrYaogun[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrYaogun[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYaogun[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYaogun[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYaogun[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //民谣
    case 3:
    {
        QList<QString> arrMinyao;
        for (int i = 0; i<5;i++) {
            arrMinyao.append(QString::asprintf("./images/pictureMusic/minyao%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrMinyao[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrMinyao[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrMinyao[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrMinyao[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrMinyao[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //电子
    case 4:
    {
        QList<QString> arrDianzi;
        for (int i = 0; i<5;i++) {
            arrDianzi.append(QString::asprintf("./images/pictureMusic/dianzi%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrDianzi[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrDianzi[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrDianzi[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrDianzi[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrDianzi[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //另类
    case 5:
    {
        QList<QString> arrLinglei;
        for (int i = 0; i<5;i++) {
            arrLinglei.append(QString::asprintf("./images/pictureMusic/linglei%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrLinglei[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrLinglei[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLinglei[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLinglei[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrLinglei[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //轻音乐
    case 6:
    {
        QList<QString> arrQingyinyue;
        for (int i = 0; i<5;i++) {
            arrQingyinyue.append(QString::asprintf("./images/pictureMusic/qingyinyue%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrQingyinyue[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrQingyinyue[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrQingyinyue[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrQingyinyue[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrQingyinyue[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //综艺
    case 7:
    {
        QList<QString> arrZongyi;
        for (int i = 0; i<5;i++) {
            arrZongyi.append(QString::asprintf("./images/pictureMusic/zongyi%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrZongyi[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrZongyi[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrZongyi[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrZongyi[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrZongyi[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //原声
    case 8:
    {
        QList<QString> arrYuansheng;
        for (int i = 0; i<5;i++) {
            arrYuansheng.append(QString::asprintf("./images/pictureMusic/yuansheng%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrYuansheng[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrYuansheng[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYuansheng[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYuansheng[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrYuansheng[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
        //ACG
    case 9:
    {
        QList<QString> arrAcg;
        for (int i = 0; i<5;i++) {
            arrAcg.append(QString::asprintf("./images/pictureMusic/Acg%d.png",i));
        }
        QString style = "QWidget#picTitle{border-image:url("+arrAcg[0]+");}";
        ui->picTitle->setStyleSheet(style);
        style = "QWidget#widMus1{border-image:url("+arrAcg[1]+");}";
        ui->widMus1->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrAcg[2]+");}";
        ui->widMus2->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrAcg[3]+");}";
        ui->widMus3->setStyleSheet(style);
        style = "QWidget{border-image:url("+arrAcg[4]+");}";
        ui->widMus4->setStyleSheet(style);
        break;
    }
    default:
        break;
    }
}

比卡丘不皮
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
qt-opensource-linux-x64-5.12.12.run
07-12
qt-opensource-linux-x64-5.12.12.run Qt（官方发音 [kju:t]，音同 cute）是一个跨平台的 C++ 开发库，主要用来开发图形用户界面（Graphical User Interface，GUI）程序，当然也可以开发不带界面的命令行（Command ...
基于QT搭建的网易云音乐
gy827257174的博客
09-01 3061
用QT实现的网易云音乐，目前实现的功能有： 1.本地音乐扫描与播放。 2.使用的Binaryify/NeteaseCloudMusicApi作为api,链接部署在本地的网易云音乐服务器，通过API播放网络音乐。 注：本软件仅供学习使用，不可用于商业用途，本人不拥有网易云音乐版权，此软件所有UI,界面框架版权全归网易所有，侵权联系本人，收到将立即删除。
基于C++和Qt Creator实现的仿制网易云音乐播放器
最新发布
m0_51415606的博客
03-10 1253
仿照网易云播放器界面实现，目的在于锻炼C++编程能力，学习Windows下Qt Creator各种组件的使用及样式设置、界面布局、QtPlugin技术、QXml读写XML文件方法、Qss文件的编写及使用等。
用qt做网易云音乐--个人中心实现
weixin_51965272的博客
03-19 1206
先上完成图 大体设计及位置，主要是按钮和label 我这里图标采用的是QLabel的pixmap 记住要勾选scaledContents，缩放内容到label大小，不会导致图标只显示一部分 这样设计完成后有一个问题，就是label会遮挡button的事件 我们要用setAttribute(Qt::WA_TransparentForMouseEvents)让label事件穿透 以下是窗体cpp文件(供大家参考) #include "personalcenterwindow.h" #include "ui
Qt 实现PC端网易云音乐界面
亅会飞的乌龟的博客
12-25 8666
闲暇时间持续开发中，欢迎大家提供想法和交流。。。 github: https://github.com/FlyWM/MumuMusic
qt编写网易云界面（15）----播放音乐模块
比卡丘不皮的博客
11-23 1395
网易云不能播放音乐算什么播放器，这里就简单的加了一个播放功能，目前可以播放当地音乐，下面我们来看看吧。代码整理中，下个博客上传源码。 点击开始按钮就可听到音乐了，这里要注意的地方就是播放条与音乐的进度问题，音乐播放改变进度条，但是我们又想拖动音乐条改变当前播放位置。这样逻辑就成立一个死循环。播放歌曲的时候呢，就会断断续续 这里的解决方案就是bloksingle，在变的一下可以，停止发送对象的信号，这样就完美的解决了问题所在。 代码段部分： player...
qt-opensource-windows-x86-5.14.2.exe
01-29
对于初次接触QT的开发者，"qt-opensource-windows-x86-5.14.2.exe"安装包是一个理想的起点，它包含了开发所需的全部组件。安装后，可以通过QT Creator或者配合Visual Studio的QT Addin开始新的项目。"下载链接.txt...
qt-opensource-linux-x64-5.9.1.rar
07-03
QT开源包"qt-opensource-linux-x64-5.9.1.rar"是针对Linux操作系统，特别是中标麒麟和Ubuntu发行版的一个软件开发工具包。QT是一个跨平台的应用程序开发框架，广泛用于创建图形用户界面（GUI）和其他类型的软件。这...
emis--QT.rar_QT界面_emis--QT
09-19
QT界面的设计通常采用直观的QDesigner工具，该工具允许开发者以拖放的方式创建界面布局，无需编写任何代码。然后，开发者可以通过QT的uic（用户界面编译器）将设计的界面转换为C++代码，或者直接使用UI文件在代码中...
qt-everywhere-opensource-src-4.8.6.tar.gz
11-30
9. **图形视图框架**：Qt Widgets模块提供了丰富的UI组件，而Qt GraphicsView框架则允许创建更复杂的动态和交互式的用户界面。 10. **Qt Quick (QML)**：虽然不在4.8.6版本中，但QML是Qt 5引入的，它是Qt的一种声明...
Qt---网易云音乐
12-27
Qt开发的Windows网易云音乐
高仿网易云app
06-04
楼主热爱开源，感兴趣可加qq群：559639800，里面有源码,这里有更多小伙伴。
Qt高仿网易云音乐界面源码
08-20
Qt高仿网易云音乐界面源码，Qt界面美化，Qt项目源码。
Qt 4.8.2 QPushButton 按钮贴图
08-10
Qt 4.8.2 QPushButton 按钮贴图 源码 可执行文件
仿网易云音乐的UI设计
05-23
一套仿网易云音乐做的音乐App方案.课程作业,谢谢大家指点.
【QT】QOverload 信号槽连接方式用法示例
weixin_42258743的博客
03-31 5812
1、普通信号 QObject::connect(信号发出者地址,信号发出者函数名称(信号发出者函数参数...),信号接收者地址,信号接收者槽函数名称(信号接收者槽函数参数...)); 注意：若在QObject子类内部定义信号槽，可直接调用connect函数。 2、重载的信号 2.1采用函数指针 void (类型:* ptrOverloadSignalFunction)(信号重载函数参数...)=&类型:: 信号; QObject::connect(信号发出者地址,ptrOverloadS...
QT学习笔记02_网易云api
AnrolaDimon的博客
01-20 848
搜索：csrf_token=hlpretag=&hlposttag=&s=（输入音乐名称）&type=1&offset=0&total=true&limit=20limit：返回数据条数(每页获取的数量)，默认为20，可以自行更改offset：偏移量(翻页)，offset需要是limit的倍数type：搜索的类型type=1 单曲type=10 专辑type=100 歌手type=1000 歌单。
基于QT复刻网易云音乐播放器--(1)建立工程与主界面
weixin_54206483的博客
02-17 810
今天我们快速建立一个Qt工程，然后复刻主界面工程配置：基类选择QMainWindow,其余默认。
仿网易云音乐切换主题
qq_17853651的博客
03-08 1075
我是一个只会搬运代码不会生产代码的搬运工（以下内容都是github开源项目使用心得）其他我也不多说先开效果图：        效果大概就这样子下面我讲一下这个改咋用   demo地址：https://github.com/ximsfei/Android-skin-support第一步: 导包compile 'skin.support:skin-support:1.2.2' compile 'ski...
Mini6410 Qt编程开发手册-20110112
"Mini6410 Qt4和Qtopia编程开发指南-20110112" 本文档是一份针对Mini6410开发板的Qt4和Qtopia编程开发指南，适用于2011年1月12日的版本。Mini6410开发板采用三星S3C6410 ARM11处理器，具有丰富的接口和功能，适合...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值