前言

其实主要是想做点记录吧，本人比较喜欢音乐，所以在上周决定在搭建一个网易云的界面框架，不做不知道，做了才发现qt还有很多的框架是自己不太熟悉的。

一、准备

1.1.想要做好这个界面我感觉graphicsView以及的了解是必不可少的。因为在qt画图功能上与QPainter实现画图比，graphicsView功能反而就变得就更强大了。查阅了相关的博客：
1.1.1.Qt之QGraphicsView入门篇
1.1.2.Qt之QGraphicsView进阶篇
1.1.3.Qt之QGraphicsView实战篇
这三个博客我感觉写的其实挺好,也是带我初步了解GraphicsView。
1.2那么知道了QGraphicsView，怎么实现网易云的轮播效果呢？
1.2.1我感觉在QGraphicsView画布上主要关注的几点是：

图片的位置
图片的优先级（轮播效果中存在缩放效果）
图片的大小情况
轮播时的轮换效果
图片与按钮之间的映射
图片的轮播切换

这些是必不可少的。其中我参考了

二、实现

1.图片的的读取，位置，大小以及按钮映射图片的实现

代码如下（示例）：
.h里面

void init();qreal getOffset(int pictureNum);int   getZValue(int pictureNum);void setPictureItem(int picId);double getScaled(int num);void setBtnGroup();int getPictureNum(int id);int getrightN(int num);QGraphicsScene * m_scene;QLineF m_lineF;QVector<PictureItem*> m_pictures;QList<QPointF> m_pointA;QButtonGroup *m_BtnGroup;QMap<int,PictureItem*> m_mapBtnToPicture;

.cpp里面


```#define POINT_SIST_FISRT 0
// 图片的位置
#define POINT_SIST_SECEND 0.15
#define POINT_SIST_OTHER 0.45#define PICTURENUM 10//图片的数量#define SCALE_VIEW_PIXMAP (qreal)1/1//View与图片比例#define RAW_VIEW_SIZE QSize(950,198)//场景大小//图片缩放大小
#define SCALEMIN 0.8
#define SCALEMAX 1#define POINT_SIST_FISRT 0
#define POINT_SIST_SECEND 0.15
#define POINT_SIST_OTHER 0.45// 初始化图片属性m_lineF.setPoints(QPointF(0,0),QPointF(this->width(),0));for(int i =0for(int i = 0; i < PICTURENUM; ++i){// 给每个图片Item添加图片QPixmap pixmap(QString("./images/picturewall/%1.png").arg(i + 1));// 设置图片大小pixmap.scaled(RAW_VIEW_SIZE / SCALE_VIEW_PIXMAP,Qt::KeepAspectRatio,Qt::FastTransformation);PictureItem * nn = new PictureItem(pixmap);m_pictures.append(nn);// 设置图片的位置QPointF point =m_lineF.pointAt(getOffset(i));m_pictures.at(i)->setPos(point);//设置图片的优先级m_pictures.at(i)->setZValue(getZValue(i));// 用于后面的轮播相当于idm_pictures.at(i)->setType(i);// 因为中间的图片要设置为最大，所以在这做了一个判断来让第二张图片最大化if(i == 1){m_pictures.at(i)->setScale(SCALEMAX);}else{m_pictures.at(i)->setScale(SCALEMIN);m_pictures.at(i)->setPos(m_pictures.at(i)->x(),(RAW_VIEW_SIZE.height() / 10));}// 把各个图片都加入到scene里面m_scene->addItem(m_pictures.at(i));m_pointA.append(m_pictures[i]->pos());// 关联按钮，做一个map的映射m_mapBtnToPicture.insert(static_cast<PictureButton*>(m_BtnGroup->button(i))->getId(),m_pictures[i]);}// 设置按钮的初始化的对应的图片m_curBtnId = 1;
}

其中getOffset就是给对应的图片加上对应的位置，因为界面上必定有三张图片是显示在界面上的，其他都是被覆盖的情况

qreal PictureRollWgt::getOffset(int pictureNum)
{switch (pictureNum) {case 0:return POINT_SIST_FISRT;case 1:return POINT_SIST_SECEND;case 2:return POINT_SIST_OTHER;default:return POINT_SIST_SECEND;}
}

其中的getScaled就是设置对应图片的缩放效果，只有其中一张图片是最大的其他都是小图片

double PictureRollWgt::getScaled(int num)
{if(num == 1)return SCALEMAX;elsereturn SCALEMIN;
}

getZValue表示图片优先级，显示的图片优先级分别是1，2，1，其他都是0；

int PictureRollWgt::getZValue(int pictureNum)
{switch (pictureNum) {case 0:return 1;case 1:return 2;case 2:return 1;default:return 0;}
}

这样就可以初步完成界面的效果了

2.完成动态效果

动态效果主要分为三种情况，

按钮切换
计时器切换
图片下面的鼠标进入到小Btn来切换

上面已经做了图片与按钮的映射，但是怎么实现这3种场景呢？

首先说一种就是图片下面的鼠标进入到小Btn来切换，当鼠标进入到小按钮内部就需要切换对应的图片到中间，做主图。因此普通QPushButton是实现不了的。所以必须要自定义按钮。也就是继承一个QAbstractButton类来实现对应的信号与槽以及重写鼠标进入事件，其中主要代码如下：

void PictureButton::enterEvent(QEvent *event)
{if(!isChecked())setChecked(true);emit sigEntered(m_id);return QAbstractButton::enterEvent(event);
}

这样就可以发送一个信号到主界面做出响应

2.关键逻辑部分，就是在做到按钮与图像item的映射后就可以去做到切换图片功能，这里主要是重新排序图片容器，QGraphicsItemAnimation与QTimeLine 都是用来实现动态效果。

void PictureRollWgt::setPictureItem(int picId)
{QVector<QGraphicsItemAnimation*> items(10);//用于去做图片动态for(int i = 0; i < 10; ++i){items[i] = new QGraphicsItemAnimation;}QTimeLine *timeline = new QTimeLine(200);timeline->setLoopCount(1);int pic = getrightN(picId - 1);qDebug() << pic;for(int i = 0; i < 10; ++i){m_pictures[i] = m_mapBtnToPicture.value(pic % 10);pic++;m_pictures[i]->setScale(getScaled(i));m_pictures[i]->setZValue(getZValue(i));m_pictures[i]->setTransformationMode(Qt::SmoothTransformation);//设置缩放模式items[i]->setItem(m_pictures[i]);items[i]->setTimeLine(timeline);items[i]->setPosAt(0.5,m_pointA[i]);}timeline->start();m_scene->invalidate();items.clear();}

总结

在实现网易云界面的界面上还有很多东西需要搭建。在实现轮播图时多亏了比卡丘不皮的网易云源代码以及博客
里面很多内容都是参考了他的，以及图片。

基于qt实现网易云界面轮播效果实现相关推荐

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

基于qt实现网易云界面轮播效果实现

前言

一、准备

二、实现

1.图片的的读取，位置，大小以及按钮映射图片的实现

2.完成动态效果

总结

基于qt实现网易云界面轮播效果实现相关推荐

最新文章

热门文章