qt编写网易云界面（7）----个性推荐界面

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

比卡丘不皮

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

阅读量5.8k

点赞数 24

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

请转载请声明转载的地址

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

版权

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

23 篇文章 120 订阅

订阅专栏

qt网易云专栏

16 篇文章 82 订阅

订阅专栏

前段时间把qt网易云中的轮播图，写了一下，多谢谢建波大佬给的指点，后期我也会把源码发到git 上，让大家快点了解，喜欢我博客，可以关注我，私信我可以提前得到当前代码。（看到必回）

我们目标的网易云界面。

当前我完成的部分：

还是有点味道的，哈哈，简单的gif 的动态图

轮播动画这里有点小问题，后期把它解决掉。

主要代码部分：

#include "picturewidget.h"
#include "ui_picturewidget.h"
#include "pictureitem.h"
#include <QGraphicsPixmapItem>
#include <QGraphicsScene>
#include <QTimer>
#include <QPainterPath>
#include <QGraphicsView>
#include <QDebug>
#include <QQueue>
#include <QGraphicsItemAnimation>
#include <QTimeLine>
#include <cmath>
#include <ctime>
#include <QTransform>
#include <QButtonGroup>
#include <QMap>
static int dir = 0;//记录方向
static QList<qreal> spaceList;
static QList<qreal> unitList;
static QList<qreal> transScaleList;//缩放比例表
static QSize pictrueBigSize = RAW_VIEW_SIZE/SCALE_VIEW_PIXMAP;
static QSize pictrueSmallSize = RAW_VIEW_SIZE/SCALE_VIEW_PIXMAP/SCALE_BIG_SMALL;
static QList<pictureItem *> itemList;
static QList<int> finishList;
static QMap<int, pictureItem *> mapLink;  //按钮id 与 图片资源的映射
static int startNum = 0;
static QList<QPointF> pointA;

PictureWidget::PictureWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::PictureWidget),
    m_timer(new QTimer(this)),
    m_scene(new QGraphicsScene(this)),
    m_index(0),
    m_currentRule(RuleA),
    m_rollCount(0),
    btnMoveEnable(true)
{
    ui->setupUi(this);
    setAttribute(Qt::WA_StyledBackground); //设置样式表
    setButtonGroup(); //设置按钮组
    setInitList();
    setPictureScreen();
    setTimerAndConnect();

    m_newT = new QTimer(this);
    m_newT->setInterval(5000);
    connect(m_newT,&QTimer::timeout,[this](){
            on_btnR_clicked();
    });
    m_newT->start();
}

PictureWidget::~PictureWidget()
{
    m_newT->stop();
    delete ui;
}

void PictureWidget::setButtonGroup()
{
    m_BtnGroup = new QButtonGroup(this);
    m_BtnGroup->addButton(ui->btnPic0,0);
    m_BtnGroup->addButton(ui->btnPic1,1);
    m_BtnGroup->addButton(ui->btnPic2,2);
    m_BtnGroup->addButton(ui->btnPic3,3);
    m_BtnGroup->addButton(ui->btnPic4,4);
    m_BtnGroup->addButton(ui->btnPic5,5);
    m_BtnGroup->addButton(ui->btnPic6,6);
    m_BtnGroup->addButton(ui->btnPic7,7);
    m_BtnGroup->addButton(ui->btnPic8,8);
    m_BtnGroup->addButton(ui->btnPic9,9);
    m_BtnGroup->setExclusive(true);
    m_BtnGroup->button(1)->setChecked(true);
    for (int i = 0; i<10; i++) {
        static_cast<pictureButton*>(m_BtnGroup->button(i))->setId(i);
    }
}

void PictureWidget::setInitList()
{
    m_PointList << P1 << P2<< P3 << P4 << P5 << P6 << P7 << P8 << P9 << P10;
    m_ZValueList << 1 << 2 << 1  << 0  << 0  << 0  << 0  << 0  << 0  << 0;
    m_PixmapScaleList << 0.8<< 1 << 0.8 << 0.8 << 0.8 << 0.8 << 0.8 << 0.8 << 0.8 <<0.8;
}

void PictureWidget::setPictureScreen()
{
    //设置样式 无标边框
    ui->graphicsView->setStyleSheet("background: transparent; padding: 0px; border: 0px;");
    ui->graphicsView->setScene(m_scene);
    m_scene->setSceneRect(0,0,RAW_VIEW_SIZE.width(),RAW_VIEW_SIZE.height());

    m_MidLine.setPoints(QPointF(0,0),\
                      QPointF(RAW_VIEW_SIZE.width(),0));

    //添加对应图片
    for (int i = 1; i<=10;i++) {
        m_PixmapList.append(QPixmap(QString(":/images/picturewall/%1.png").arg(i)));
    }
    for (int i = 0; i<10;i++) {
        itemList.append(new pictureItem(m_PixmapList[i].scaled(pictrueBigSize,
                               Qt::KeepAspectRatio,Qt::SmoothTransformation)));
        itemList[i]->setScale(m_PixmapScaleList[i]);
        itemList[i]->setType(i);
        itemList[i]->setItemId(i);
        itemList[i]->setOffset(QPointF(0,0));
    }
    //图元添加图片
    for(int i = 0; i<10; i++)
    {
        m_scene->addItem(itemList[i]);//添加图元       
        itemList[i]->setPos(m_MidLine.pointAt(m_PointList[i]));//设置位置
        itemList[i]->setZValue(m_ZValueList[i]);//设置显示优先级
        itemList[i]->setTransformationMode(Qt::SmoothTransformation);//设置缩放模式
        if(i != 1)
        {
           itemList[i]->setPos(itemList[i]->x(),RAW_VIEW_SIZE.height()/10);
        }
        pointA.append(itemList[i]->pos());  //放入到对应位置
        qDebug()<< pointA[i].x() << ": " << pointA[i].y();
    }
    //放入映射map中
    for(int i =0; i<10; i++)
    {
        mapLink.insert(static_cast<pictureButton*>(m_BtnGroup->button(i))->id(),itemList[i]);
    }

    QMap<int,pictureItem *>::const_iterator it;

    for (it = mapLink.constBegin();it!=mapLink.constEnd();it++) {
        qDebug()<< it.key()<< ": " << it.value();
    }

}

void PictureWidget::setTimerAndConnect()
{
    //利用持续时间和帧数计算出定时时间,持续时间/（帧数*持续时间），这里乘1000是转为秒
    m_timer->setInterval(DURATION_MS/(FPS*DURATION_MS/1000));
    connect(m_timer,&QTimer::timeout,this,&PictureWidget::timerOutFunc);

    for(int i = 0; i<10; i++)
    {
        connect(itemList[i],&pictureItem::clickedId,this,&PictureWidget::clickedItemRoll);
        void (pictureButton:: *funcPtr)(int) = &pictureButton::entered;
        connect(static_cast<pictureButton*>(m_BtnGroup->button(i)),funcPtr,[this](int id){
             pictureItem * p = mapLink.value(id); //获取id 的图片值
             btnMoveEnable = false;
             clickedItemRoll(p->type());
             qDebug()<<p->type();
        });
    }

}

int PictureWidget::getIndexByRules(int oldIndex, int rule)
{
    switch (rule) {
    case 1:
        return  (oldIndex+1)/10;
    case -1:
         return oldIndex==0?9:oldIndex-1;
    default:
        return 0;
    }

}

void PictureWidget::rollItem(int rollDir, unsigned rollCount)
{
    rollCount = 0;
    if(m_timer->isActive())
        return;
    //获取新的数据
    //主要位置  主位置
    int nbegin = rollDir;
    startNum = getrightN(nbegin);
    m_timer->start();
}

int PictureWidget::getrightN(int num)
{
    if(num == -1)
    {
        num = 9;
    }
    if(num == 10)
    {
        num = 0;
    }

    return num;
}

void PictureWidget::timerOutFunc()
{
//    on_btnR_clicked();

    QVector<QGraphicsItemAnimation *>item(10);

    for (int i = 0; i < 10; i++) {
        item[i] = new QGraphicsItemAnimation();
    }

    QTimeLine *timeline = new QTimeLine(200);
    timeline->setLoopCount(1); //设置3次
    int first = getrightN(startNum-1);
    for (int i = 0; i<10; i++) {
        itemList[i] = mapLink.value(first%10);
        first++;

//        QPointF point = m_MidLine.pointAt(m_PointList[i]);
//        itemList[i]->setPos(point);//设置位置
        itemList[i]->setScale(m_PixmapScaleList[i]);
        itemList[i]->setZValue(m_ZValueList[i]);//设置显示优先级
        itemList[i]->setTransformationMode(Qt::SmoothTransformation);//设置缩放模式
        item[i]->setItem(itemList[i]);
        item[i]->setTimeLine(timeline);
        item[i]->setPosAt(1,pointA[i]);

//        if(int(itemList[i]->zValue()) == 2)
//        {
//            item[i]->setScaleAt(1,1,1);
//        }

        itemList[i]->setPos(pointA[i]);

    }

    QMap<int,pictureItem *>::const_iterator it;

    for (it = mapLink.constBegin();it!=mapLink.constEnd();it++) {
        qDebug()<< it.key()<< ": " << it.value();
    }
    timeline->start();
    m_scene->invalidate();
    m_timer->stop();
}

void PictureWidget::clickedItemRoll(int type)
{
    if(m_timer->isActive())
        return;
    rollItem(type, 0); //得到最新的id 按钮位置
}

//左边运动
void PictureWidget::on_btnL_clicked()
{
    int id = m_BtnGroup->checkedId();
    if(id-1<0)
    {
        id = 9;
    }
    else {
        id = id -1;
    }
    m_BtnGroup->button(id)->setChecked(true);
    rollItem(id,0);
}
//右边运动
void PictureWidget::on_btnR_clicked()
{
    int id = m_BtnGroup->checkedId();
    id = (id+1)%10;
    m_BtnGroup->button(id)->setChecked(true);
    rollItem(id,0);
}

template<typename T>
void PictureWidget::rollList(QList<T> &oldList, int dir, int count)
{
    for(int i = 0; i<count; i++)
    {
        if(dir == 1)
        {
            oldList.prepend(oldList.last());
            oldList.removeLast();
        }
        else if(dir == -1)
        {
            oldList.append(oldList.first());
            oldList.removeFirst();
        }
    }

}

qss 部分：

/*推荐歌单*/
QLabel#lab_T
{
	font-family:"微软雅黑";
	border-bottom: 3px solid rgb(236,65,65);
	color: rgb(55,55,55);
	font-size:20px;
	font-weight: bold;
}
/*推荐歌单按钮*/
QPushButton#ptn_cen
{
  border-image:url(images/btn_right_1_n.png);
}
/*5个图片*/
QWidget#widgetP1
{
	border-image:url(images/widget1.png);
}

QWidget#widgetP2
{
	border-image:url(images/widget2.png);
}
QWidget#widgetP3
{
	border-image:url(images/widget3.png);
}
QWidget#widgetP4
{
	border-image:url(images/widget4.png);
}
QWidget#widgetP5
{
	border-image:url(images/widget5.png);
}

主页面加载：

void AllMain::setPictureWall()
{
    pictureWidget = new PictureWidget();
    ui->verLout_pic->addWidget(pictureWidget);
}

比卡丘不皮

关注

24
点赞
踩
73

收藏

觉得还不错? 一键收藏
15
评论
qt编写网易云界面（7）----个性推荐界面

前段时间把qt网易云中的轮播图，写了一下，多谢谢建波大佬给的指点，后期我也会把源码发到git 上，让大家快点了解，我们目标的网易云界面。当前我完成的部分：还是有点味道的，哈哈，简单的gif 的动态图...
复制链接

扫一扫