Qt编写网易云界面 （6） -----排行榜实现

今天实现一下排行榜模块，效果如图：

UI设计：

主要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.h：

#ifndef RANKINGITEM_H
#define RANKINGITEM_H
 
#include <QWidget>
 
namespace Ui {
class RankingItem;
}
 
class RankingItem : public QWidget
{
    Q_OBJECT
 
public:
    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

RankingItem.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,152
    ui->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);
}

本栏目推荐文章
• Unity 获取当前系统时间并在UI界面中显示
• 墨天轮国产数据库排行榜年终总结-2023年
• CHATGPT官网发布全新用户界面，提供更流畅的聊天体验
• 火狐浏览器-每次启动都到选择用户配置文件界面
• 界面控件DevExpress VCL v23.2——复杂表单的性能增强
• 美轮美奂的界面发现上位机开发之美
• 界面组件DevExpress WPF v23.2 - 更轻量级的主题支持
• 配置分辨率数组，自动获取当前窗口界面的截图
• CHATGPT中文界面升级：更亲近的智能体验
• 前端开发笔记[6]-基于Gradio的力声信号分析界面

界面 排行榜界面 排行榜 排行榜 排行榜 学院 排行榜ulr 排行榜redis 排行榜javafx 爬虫 小米 商店 排行榜 排行榜 互联网 公司2023 anglesharp linqpad排行榜 博客 热度 排行榜 数据库 数据