qt编写网易云界面（10）----排行榜模块

这个模块东西感觉不是很多，其实在，开发的时候细节还是很麻烦的，本以为2个小时绝对搞定，结果搞了半天，不过也想到了很多方式去实现对应的效果，希望大家能够喜欢。

喜欢我，点赞加关注我偶，很快会把整个项目给大家展示出来，希望刚接触qt的朋友，可以在我这个项目学习到一点点知识就好。我就十分开心了。

话不多说，我们来看这个模块目标网易云中的样子：

我完成的模块部分：

动态图如下：

这里采用了QListWidget 配合 QWidget， QListWidgetItem 等方式，加载进入数据。

RankingItem类图，布局：

排行榜界面基本布局。

主要的qss 代码：

/*排行榜内容*/
QLabel#labRankl
{font-family:"微软雅黑";color: rgb(55,55,55);font-size:20px;font-weight: bold;
}/*查看全部*/
QLabel#labmore1,#labmore2
{font-family:"微软雅黑";font-size:12px;color: rgb(103,103,103);
}/*榜单图片*/
QWidget#widUp
{border-image:url(images/ranking/widUp.png);
}QWidget#widUp2
{border-image:url(images/ranking/widUp2.png);
}
/*列表框部分*/
QListWidget#listCont,#listCont2
{border:0px;color:rgb(55,55,55);background:rgb(255,255,255);
}
/*
QListWidget::Item#listCont,::Item#listCont2
{height:36;border:0px solid rgb(255,255,255);   color:rgb(55,55,55);background:rgb(255,255,255);
}
*/
QListWidget::Item:hover#listCont,::Item:hover#listCont2
{border-radius:2px;background:rgb(239,239,239);
}
/*选中*/
QListWidget::Item:selected#listCont,::Item:selected#listCont2
{border-radius:2px;background:rgb(239,239,239);
}

RankingItem对应的头文件：

#ifndef RANKINGITEM_H
#define RANKINGITEM_H#include <QWidget>namespace Ui {
class RankingItem;
}class RankingItem : public QWidget
{Q_OBJECTpublic:explicit RankingItem(QWidget *parent = nullptr);~RankingItem();//设置第一数据，false 为普通颜色, true为红色void setNum(int num,bool b);//设置第2个数据 str  or  pic(int)void setStringOrPic(QString str);//num = 0 加载上  1加载下 2加载-， 其它不处理void setStringOrPic(int  num);//设置歌名void setMusicName(QString strName);//设置作者void setMusicAutor(QString name);private:Ui::RankingItem *ui;
};#endif // RANKINGITEM_H

对应cpp 文件：

#include "rankingitem.h"
#include "ui_rankingitem.h"
#include <QString>
RankingItem::RankingItem(QWidget *parent) :QWidget(parent),ui(new Ui::RankingItem)
{ui->setupUi(this);this->setWindowFlag(Qt::FramelessWindowHint);ui->labNum->setStyleSheet("QLabel{color:rgb(255,61,61);background:transparent;}");ui->labCon->setStyleSheet("QLabel{color:rgb(54,54,54);background:transparent;}");//152,152,152ui->labEnd->setStyleSheet("QLabel{color:rgb(152,152,152);background:transparent;}");this->setStyleSheet("QWidget{background:transparent; border-radius:8px;}""QWidget:hover{background:transparent;}");}RankingItem::~RankingItem()
{delete ui;
}void RankingItem::setNum(int num, bool b)
{ui->labNum->setText(QString::number(num));if(b == true){ui->labNum->setStyleSheet("QLabel{color:rgb(255,61,61);background:transparent;}");}else {ui->labNum->setStyleSheet("QLabel{color:rgb(222,222,222;background:transparent;)}");}
}void RankingItem::setStringOrPic(QString str)
{ui->labPicOrText->setText(str);ui->labPicOrText->setStyleSheet("QLabel{color:rgb(152,152,152);background:transparent;}");
}void RankingItem::setStringOrPic(int num)
{// 0 加载上  1加载下 2加载-， 其它不处理ui->labPicOrText->setMinimumSize(8,4);ui->labPicOrText->setMaximumSize(8,8);if(num == 0){ui->labPicOrText->setStyleSheet("QLabel{border-image:url(./images/ranking/up.png);}");}else if(num == 1){ui->labPicOrText->setStyleSheet("QLabel{border-image:url(./images/ranking/down.png);}");}else if (num == 2) {ui->labPicOrText->setStyleSheet("QLabel{border-image:url(./images/ranking/nor.png);}");}else {//什么都补处理}}void RankingItem::setMusicName(QString strName)
{ui->labCon->setText(strName);
}void RankingItem::setMusicAutor(QString name)
{ui->labEnd->setText(name);
}

主页面代码部分：

void AllMain::setRankData()
{//第一个QListWidgetItem * newWidget = new QListWidgetItem(ui->listCont);RankingItem * item = new  RankingItem();newWidget->setBackgroundColor(QColor(249,249,249));newWidget->setSizeHint(QSize(item->width(),item->height()));item->setNum(1,true);item->setStringOrPic("792%");item->setMusicName("删了吧");item->setMusicAutor("烟(许佳豪)");ui->listCont->insertItem(0,newWidget);ui->listCont->setItemWidget(newWidget,item);//QListWidgetItem * newWidget1 = new QListWidgetItem(ui->listCont);RankingItem * item1 = new  RankingItem();newWidget1->setBackgroundColor(QColor(255,255,255));newWidget1->setSizeHint(QSize(item->width(),item->height()));item1->setNum(2,true);item1->setStringOrPic("127%");item1->setMusicName("时间轴");item1->setMusicAutor("余佳运");ui->listCont->insertItem(1,newWidget1);ui->listCont->setItemWidget(newWidget1,item1);QListWidgetItem * newWidget2 = new QListWidgetItem(ui->listCont);RankingItem * item2 = new  RankingItem();newWidget2->setBackgroundColor(QColor(249,249,249));newWidget2->setSizeHint(QSize(item->width(),item->height()));item2->setNum(3,true);item2->setStringOrPic("113%");item2->setMusicName("没你也能活下去");item2->setMusicAutor("Jony J");ui->listCont->insertItem(2,newWidget2);ui->listCont->setItemWidget(newWidget2,item2);QListWidgetItem * newWidget3 = new QListWidgetItem(ui->listCont);RankingItem * item3 = new  RankingItem();newWidget3->setBackgroundColor(QColor(255,255,255));newWidget3->setSizeHint(QSize(item->width(),item->height()));item3->setNum(4,false);item3->setStringOrPic("111%");item3->setMusicName("都不懂");item3->setMusicAutor("吉法师");ui->listCont->insertItem(3,newWidget3);ui->listCont->setItemWidget(newWidget3,item3);QListWidgetItem * newWidget4 = new QListWidgetItem(ui->listCont);RankingItem * item4 = new  RankingItem();newWidget4->setBackgroundColor(QColor(249,249,249));newWidget4->setSizeHint(QSize(item->width(),item->height()));item4->setNum(5,false);item4->setStringOrPic("88%");item4->setMusicName("透明轨迹");item4->setMusicAutor("ICY");ui->listCont->insertItem(4,newWidget4);ui->listCont->setItemWidget(newWidget4,item4);//设置第一个选中ui->listCont->setCurrentRow(0);}

void AllMain::setRankNew()
{QListWidgetItem * newWidget = new QListWidgetItem(ui->listCont2);RankingItem * item = new  RankingItem();newWidget->setBackgroundColor(QColor(249,249,249));newWidget->setSizeHint(QSize(item->width(),item->height()));item->setNum(1,true);item->setStringOrPic(0);item->setMusicName("删了吧");item->setMusicAutor("烟(许佳豪)");ui->listCont2->insertItem(0,newWidget);ui->listCont2->setItemWidget(newWidget,item);//QListWidgetItem * newWidget1 = new QListWidgetItem(ui->listCont2);RankingItem * item1 = new  RankingItem();newWidget1->setBackgroundColor(QColor(255,255,255));newWidget1->setSizeHint(QSize(item->width(),item->height()));item1->setNum(2,true);item1->setStringOrPic(1);item1->setMusicName("时间轴");item1->setMusicAutor("余佳运");ui->listCont2->insertItem(1,newWidget1);ui->listCont2->setItemWidget(newWidget1,item1);QListWidgetItem * newWidget2 = new QListWidgetItem(ui->listCont2);RankingItem * item2 = new  RankingItem();newWidget2->setBackgroundColor(QColor(249,249,249));newWidget2->setSizeHint(QSize(item->width(),item->height()));item2->setNum(3,true);item2->setStringOrPic(2);item2->setMusicName("没你也能活下去");item2->setMusicAutor("Jony J");ui->listCont2->insertItem(2,newWidget2);ui->listCont2->setItemWidget(newWidget2,item2);QListWidgetItem * newWidget3 = new QListWidgetItem(ui->listCont2);RankingItem * item3 = new  RankingItem();newWidget3->setBackgroundColor(QColor(255,255,255));newWidget3->setSizeHint(QSize(item->width(),item->height()));item3->setNum(4,false);item3->setStringOrPic(2);item3->setMusicName("都不懂");item3->setMusicAutor("吉法师");ui->listCont2->insertItem(3,newWidget3);ui->listCont2->setItemWidget(newWidget3,item3);QListWidgetItem * newWidget4 = new QListWidgetItem(ui->listCont2);RankingItem * item4 = new  RankingItem();newWidget4->setBackgroundColor(QColor(249,249,249));newWidget4->setSizeHint(QSize(item->width(),item->height()));item4->setNum(5,false);item4->setStringOrPic(2);item4->setMusicName("透明轨迹");item4->setMusicAutor("ICY");ui->listCont2->insertItem(4,newWidget4);ui->listCont2->setItemWidget(newWidget4,item4);//设置第一个选中ui->listCont2->setCurrentRow(0);
}

代码部分为了方便就快速写了，你们可以自己优化下，同时希望能给到刚使用qss 的小伙伴们，更加好的学习到。

qt编写网易云界面（10）----排行榜模块相关推荐

qt编写网易云界面（7）----个性推荐界面
前段时间把qt网易云中的轮播图,写了一下,多谢谢建波大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码.(看到必回) 我们目标的网易云界面 ...
qt编写网易云界面（8）----专属定制界面
前段时间把qt网易云中的简单的画廊写了一下,多谢狗哥大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码.(看到必回) 我们目标的网易云界面 ...
qt编写网易云界面（13）----一键换肤模块
有关一键换肤,我们可以加载不同的qss文件对应其经行改变,这里模仿网易云,一键换肤的功能,直接看写过的部分. 代码这周就上传了,想要代码的朋友,记得关注与点赞,让我们共同进步. 这里我放入了6个模块颜 ...
qt编写网易云界面（5）----搜索框的实现
我们知道当我们点击网易云的搜索框的时候,会出现对应的搜索内容. 如下图: 滑块可以滑动,选择对应的模块我实现的部分: gif显示的还是不是那么好.下面简单实现过程: 主页面使用过滤器,构造函数中: ...
qt编写网易云界面（16）---- 源码与感想
前言: 网易云这个项目弄完了,不知道为何,做完后有点点失落感,当时没有考虑到后面会有小伙伴们想要学习这个代码,所以在项目开始的时候做的非常错乱,很多现在看看都是非常低级的问题. 这个项目算是刚接触qt ...
qt编写网易云界面（3）----列表框的实现
今天完成列表框的数据,我们来看下,原版网易云部分: 我们要实现的就是左边的部分,标题栏与下面控制栏都已经写完毕.详细可以看我前面播客. 目前完成的部分: 首先要说明一下,里面会有些不同,毕竟我找不到图 ...
qt编写网易云界面（6）----个人中心的实现
我们点击网易云的个人中心的时候. 目前我实现的部分: 还是有点区别的,这部分动态图如下: 这里personform.ui布局部分: personform.h #ifndef PERSONFORM_H ...
基于qt实现网易云界面轮播效果实现
基于qt实现网易云音乐的轮播效果网易云轮播效果前言其实主要是想做点记录吧,本人比较喜欢音乐,所以在上周决定在搭建一个网易云的界面框架,不做不知道,做了才发现qt还有很多的框架是自己不太熟悉的. ...
基于Qt模仿网易云音乐播放器
基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...

qt编写网易云界面（10）----排行榜模块

qt编写网易云界面（10）----排行榜模块相关推荐

最新文章

热门文章