一、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博客案例
到此这篇关于qt实现界面滑动切换效果的文章就介绍到这了,更多相关qt界面滑动切换内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
需要了解更多c/c++开发分享Qt实现界面滑动切换效果的思路详解，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/1120953.html