一、Qt实现界面滑动切换效果

二、设计思路

三、主要函数讲解

四、源代码解析

4、1 初始化界面

4、2 上一页滑动效果

4、3 下一页滑动效果

4、4 动画结束处理

五、源码地址

六、其他文章

一、Qt实现界面滑动切换效果

效果如下图，滑动效果移动上下屏幕。

二、设计思路

利用QStackWidget将页面存储起来，因为页面比较少，因此我直接将所有的页面存储在QStachWidget中，如果页面相对较多，可以使用使用使渲染的方式。

然后使用show函数同时展示两个页面的内容，这个很重要，如果使用setCurrentIndex只会展示一个界面，这样不会出现两个界面同时存在的情况。

使用QPropertyAnimation以及QParallelAnimationGroup来设置界面切换动画。

当页面左移动时，将原始界面移除屏幕到左边，将当前界面从右边移动至现在界面位置。

当页面右移动时，将原始界面移除屏幕到右边，将当前界面从左边移动至屏幕展示位置

三、主要函数讲解

QPropertyAnimation：动画类，如果仅控制一个界面的动画可以直接设置动画效果后，start函数启动动画效果。

QParallelAnimationGroup：动画组类，控制一组动画同时运行，我们这里控制了两个界面因此需要使用QParallelAnimationGroup来控制两个界面的动画。

QStackedWidget：用于存储多个界面，当界面需要展示的时候可以通过setCurrentIndex展示当前页面。

四、源代码解析

4、1 初始化界面

在QStatchWidget中添加多个界面。因为这是游戏界面初始化，每一页有25题，一共有515道题目，翻页的总数等int(515/25).

#define MAX_NUM 515
LevelMainWidget::LevelMainWidget(QWidget* parent): QWidget(parent), m_ptrStackWidget(new QStackedWidget(this)), m_ptrLayoutMain(new QHBoxLayout), m_ptrBtnPre(new QPushButton("上一个", this)), m_ptrBtnNext(new QPushButton("下一个", this)), m_bDonghua(false){// 添加界面for (int i = 0; i < 515; i += 25) {int start = i + 1;int end = i + 25;if (end > 515) {end = 515;}LevelWidget* lvlWidget = new LevelWidget(start, end);m_listLevelWidget.append(lvlWidget);m_ptrStackWidget->addWidget(lvlWidget);connect(lvlWidget, &LevelWidget::sigBtnClick, this,&LevelMainWidget::slotBtnLevel);}// 设置当前展示的界面索引。m_ptrStackWidget->setCurrentIndex(0);// 添加上一页按钮m_ptrLayoutMain->addWidget(m_ptrBtnPre);// 添加展示的界面m_ptrLayoutMain->addWidget(m_ptrStackWidget);// 添加下一页按钮m_ptrLayoutMain->addWidget(m_ptrBtnNext);setFixedSize(500, 500);setLayout(m_ptrLayoutMain);initConnect();
}
void LevelMainWidget::initConnect()
{connect(m_ptrBtnPre, SIGNAL(clicked()), this, SLOT(slotBtnPre()));connect(m_ptrBtnNext, SIGNAL(clicked()), this, SLOT(slotBtnNext()));
}

4、2 上一页滑动效果

获取展示界面的宽度以及高度，下移动界面的时候需要使用。

m_bDonghua：记录当前是否在动画效果中，如果在动画效果中不进行翻页（如果不设置，在快速切换的时候会出现重影）

    m_ptrStackWidget->setCurrentIndex(PreIndex);m_ptrStackWidget->widget(currentIndex)->show();

animation1：设置当前页（未切换前）面页面的动画效果，你可以看到startValue和endValue，是从原始屏幕位置移除屏幕外。

animation2：设置即将切换到界面的动画效果，你可以看到startValue和endValue，是从屏幕外位置移除屏幕正中间。

当界面的动画同时执行的时候就出现滑动效果。

void LevelMainWidget::slotBtnPre()
{if (m_bDonghua) {return;}m_bDonghua = true;int currentIndex = m_ptrStackWidget->currentIndex();int windowWidth = m_ptrStackWidget->widget(currentIndex)->width();int windowHieght = m_ptrStackWidget->widget(currentIndex)->height();int PreIndex = currentIndex - 1;if (currentIndex == 0) {return;}m_ptrStackWidget->setCurrentIndex(PreIndex);m_ptrStackWidget->widget(currentIndex)->show();QPropertyAnimation* animation1;QPropertyAnimation* animation2;QParallelAnimationGroup* group = new QParallelAnimationGroup;animation1 = new QPropertyAnimation(m_ptrStackWidget->widget(currentIndex),"geometry");animation1->setDuration(500);animation1->setStartValue(QRect(0, 0, windowWidth, windowHieght));animation1->setEndValue(QRect(windowWidth, 0, windowWidth, windowHieght));animation2 =new QPropertyAnimation(m_ptrStackWidget->widget(PreIndex), "geometry");animation2->setDuration(500);animation2->setStartValue(QRect(-windowWidth, 0, windowWidth, windowHieght));animation2->setEndValue(QRect(0, 0, windowWidth, windowHieght));group->addAnimation(animation1);group->addAnimation(animation2);group->start();group->setProperty("widget", QVariant::fromValue(m_ptrStackWidget->widget(currentIndex)));connect(group, SIGNAL(finished()), this, SLOT(onAnimationFinished()));
}

4、3 下一页滑动效果

获取展示界面的宽度以及高度，下移动界面的时候需要使用。

m_bDonghua：记录当前是否在动画效果中，如果在动画效果中不进行翻页（如果不设置，在快速切换的时候会出现重影）

    m_ptrStackWidget->setCurrentIndex(NextIndex);m_ptrStackWidget->widget(currentIndex)->show();

animation1：设置当前页（未切换前）面页面的动画效果，你可以看到startValue和endValue，是从原始屏幕位置移除屏幕外。

animation2：设置即将切换到界面的动画效果，你可以看到startValue和endValue，是从屏幕外位置移除屏幕正中间。

当界面的动画同时执行的时候就出现滑动效果。

void LevelMainWidget::slotBtnNext()
{if (m_bDonghua) {return;}m_bDonghua = true;int currentIndex = m_ptrStackWidget->currentIndex();int windowWidth = m_ptrStackWidget->widget(currentIndex)->width();int windowHieght = m_ptrStackWidget->widget(currentIndex)->height();int NextIndex = currentIndex + 1;if (currentIndex >= m_ptrStackWidget->count()) {return;}m_ptrStackWidget->setCurrentIndex(NextIndex);m_ptrStackWidget->widget(currentIndex)->show();QPropertyAnimation* animation1;QPropertyAnimation* animation2;QParallelAnimationGroup* group = new QParallelAnimationGroup;animation1 = new QPropertyAnimation(m_ptrStackWidget->widget(currentIndex),"geometry");animation1->setDuration(500);animation1->setStartValue(QRect(0, 0, windowWidth, windowHieght));animation1->setEndValue(QRect(-windowWidth, 0, windowWidth, windowHieght));animation2 =new QPropertyAnimation(m_ptrStackWidget->widget(NextIndex), "geometry");animation2->setDuration(500);animation2->setStartValue(QRect(windowWidth, 0, windowWidth, windowHieght));animation2->setEndValue(QRect(0, 0, windowWidth, windowHieght));group->addAnimation(animation1);group->addAnimation(animation2);group->start();group->setProperty("widget", QVariant::fromValue(m_ptrStackWidget->widget(currentIndex)));connect(group, SIGNAL(finished()), this, SLOT(onAnimationFinished()));
}

4、4 动画结束处理

动画结束后需要将上一界面进行隐藏，在切换页面的时候已经将上一页面的指针保存发送过来了。

 group->setProperty("widget", QVariant::fromValue(m_ptrStackWidget->widget(currentIndex)));

因此在动画结束时，获取上一页面的指针，然后再修改其隐藏状态即可。

void LevelMainWidget::onAnimationFinished()
{QParallelAnimationGroup* group = (QParallelAnimationGroup*)sender();QWidget* widget = group->property("widget").value<QWidget*>();if (nullptr != widget) {widget->hide();}m_bDonghua = false;
}

五、源码地址

源码地址：啊渊 / QT博客案例

六、其他文章

1. QT开发环境安装以配置。

2. QT线段画板实战

3. 半小时玩转QT桌面系统托盘(含托盘消息)

4. QT入门开发一个时钟

5. 半小时教你做大转盘游戏（QT篇）

6. 手把手教你制作【带吸附效果的线段绘制】（QT）

7. 手把手教你开发-滚动效果号码抽奖（QT）

8. 100行代码实现贪吃蛇小游戏

9.C++实现《扫雷》游戏（入门经典）

10. svg转图片工具开发

11. Qt网路与通信(获取本机网络信息）

12. Qt网路与通信(UDP客户与服务）

13. Qt网络与通信（TCP聊天室）

14. Qt多线程以及线程池

15. Qt散点图、折线图、柱状图、盒须图、饼状图、雷达图开发实例

Qt实现界面滑动切换效果相关推荐

android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...
在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android- ...
python实现界面自由切换_PyQt实现界面翻转切换效果
这篇文章主要为大家详细介绍了PyQt实现界面翻转切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 PyQt实现界面翻转切换效果是用qt的场景功能来实现的,用到了QGraphicsView,Q ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...
Qt 多界面来回切换的问题以及Qt界面关闭与销毁
Qt 中我们经常会用到好几个界面,那么这几个界面之间来回切换就是一个经常出现的问题.之前我也总是被这个问题困扰,现在写一个样例程序当作一种解决方案,希望能给大家启发. 首先我定义了两个界面,一个主界面 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
新闻展示,滚动新闻程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...
一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...
Android短视频app开发中如何实现上下滑动切换效果
在大部分短视频app开发中,都会在app内增加上下滑动切换视频的功能,即下滑切换到下一条短视频,上滑切回到上一条.这种机制可以给用户带来良好的视觉体验,云豹作为优秀的app源码供应商,在该效果的实现上 ...
关于Qt 程序界面中英文切换总结
关于Qt 程序界面中英文切换总结 Qt通过lupdate.exe和linguist.exe实现程序中英文切换一种基于QtCreater直接使用Qt预言家(注意电脑有权限,可能翻译失败),另外一种用s ...

Qt实现界面滑动切换效果

一、Qt实现界面滑动切换效果

二、设计思路

三、主要函数讲解

四、源代码解析

4、1 初始化界面

4、2 上一页滑动效果

4、3 下一页滑动效果

4、4 动画结束处理

五、源码地址

六、其他文章

Qt实现界面滑动切换效果相关推荐

最新文章

热门文章

Qt实现界面滑动切换效果

一、Qt实现界面滑动切换效果

二、 设计思路

三、主要函数讲解

四、源代码解析

4、1 初始化界面

4、2 上一页滑动效果

4、3 下一页滑动效果

4、4 动画结束处理

五、源码地址

六、其他文章

Qt实现界面滑动切换效果相关推荐

最新文章

热门文章

二、设计思路