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

最新推荐文章于 2024-04-29 21:03:23 发布

比卡丘不皮

最新推荐文章于 2024-04-29 21:03:23 发布

阅读量2.9k

点赞数 4

分类专栏： qt（QSS）进步空间 qt网易云专栏文章标签： qt qss c++ 网易云 QWidget

请转载请声明转载的地址

本文链接：https://blog.csdn.net/weixin_42126427/article/details/121281712

版权

qt（QSS）进步空间同时被 2 个专栏收录

23 篇文章 120 订阅

订阅专栏

qt网易云专栏

16 篇文章 82 订阅

订阅专栏

这个模块东西感觉不是很多，其实在，开发的时候细节还是很麻烦的，本以为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_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

对应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);
}

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

比卡丘不皮

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
qt编写网易云界面（10）----排行榜模块

这个模块东西感觉不是很多，其实在，开发的时候细节还是很麻烦的，本以为2个小时绝对搞定，结果搞了半天，不过也想到了很多方式去实现对应的效果，希望大家能够喜欢。话不多说，我们来看这个模块目标网易云中的样子：我完成的模块部分：动态图如下：...
复制链接

扫一扫