Qt实现界面滑动切换效果的思路详解

2024-04-02 19:04:59 490人浏览八月长安

摘要

目录一、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博客案例

到此这篇关于Qt实现界面滑动切换效果的文章就介绍到这了,更多相关Qt界面滑动切换内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Qt实现界面滑动切换效果的思路详解

本文链接: https://www.lsjlt.com/news/153533.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Qt实现界面滑动切换效果的思路详解

目录一、Qt实现界面滑动切换效果二、设计思路三、主要函数讲解四、源代码解析4、1 初始化界面4、2 上一页滑动效果4、3 下一页滑动效果4、4 动画结束处理五、源码地址...

99+

2022-11-13
Unity实现滑动更换界面效果

在做2048这个游戏时，因为菜单页面还能查看游戏规则，而这些规则又不在同一个页上，所以需要滑动页面实现页面切换，但是仅仅使用unity提供的组件做出的效果仅有一个切换的意思，交互感很...

99+

2022-11-12
jQuery实现类似滑动门切换效果的层切换

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...

99+

2022-11-15

滑动门层切换
vue 路由切换过渡动效滑入滑出效果的实例代码

效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {tra...

99+

2022-11-13
Android如何使用ViewPager2实现页面滑动切换效果

目录1.引言2.实现页面滑动切换2.1 引入ViewPager2库2.2 使用ViewPager22.3 构建Fragment2.4 继承FragmentStateAdapter2....

99+

2022-11-13
Android中怎么使用ViewPager2实现页面滑动切换效果

这篇“Android中怎么使用ViewPager2实现页面滑动切换效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Andr...

99+

2023-06-29
Android编程实现ViewPager多页面滑动切换及动画效果的方法

本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下：一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效...

99+

2022-06-06

方法 viewpager 动画 Android
Android应用中利用ViewPager实现多页面滑动切换效果示例

1、添加android support包因为上面的几个类都是在android support包中才提供，我们先添加包。在Eclipse->Window->And...

99+

2022-06-06

示例 viewpager Android
如何通过CSS实现单页面应用的平滑切换效果

在现代Web开发中，单页面应用已经成为了一种流行的开发模式。用户在单页面应用中进行不同的操作时，页面的内容会进行平滑的切换，给用户带来良好的用户体验。本文将介绍如何使用CSS来实现单页面应用的平滑切换效果，并提供具体的代码示例。一、使用CS...

99+

2023-10-21

CSS 单页面应用平滑切换
JavaScript怎么实现移动端手势滑动的幻灯片切换效果

这篇文章主要介绍了JavaScript怎么实现移动端手势滑动的幻灯片切换效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么实现移动端手势滑动的幻灯片切换...

99+

2022-10-19
Android实现Activity界面切换添加动画特效的方法

本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法，对于Android程序设计人员来说有很好的参考借鉴价值。具体方法如下：了解Android程序...

99+

2022-06-06

方法 activity 动画 Android
Android应用中使用ViewPager实现类似QQ的界面切换效果

这几天在研究ViewPager，简单的写一下如何使用ViewPager实现类似于QQ的“最近联系人、好友、群组”的界面切换（不知道他们是不是用这个方法实现的）。 ViewPag...

99+

2022-06-06

界面 viewpager Android
JS+CSS实现超漂亮的动态翻书效果(思路详解)

目录前言思路准备正文一、CSS实现1、搭建基本框架2、编写CSS二、JS实现总结前言本文将带大家来实现一个非常有趣的案例——打开书本效果。我们平常冲浪时是不...

99+

2023-05-20

js动态翻书效果 js翻书效果
Android实现左右滑动效果的方法详解

本示例演示在Android中实现图片左右滑动效果。关于滑动效果，在Android中用得比较多，本示例实现的滑动效果是使用ViewFlipper来实现的，当然也可以使用其它的Vi...

99+

2022-06-06

方法动效 Android
Android实现闪屏及注册和登录界面之间的切换效果

在没给大家介绍正文之前先给大家说下实现思路：先分别实现闪屏、注册界面、登录界面的活动，再用Intent将相关的活动连接起来，实现不同活动之间的跳转。此次试验代码较多，我只列出...

99+

2022-06-06

闪屏界面 Android
Vue鼠标滚轮滚动切换路由效果的实现方法

一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听当跳转到其他路由(跳出这个根路由时), 根路由组...

99+

2022-11-12
Android自定义view之利用drawArc方法实现动态效果(思路详解)

目录前言一、准备1.测量2.初始化画笔3.自定义属性二、关键方法介绍drawArc 三.实现 1.思路2.效果图前言前几天看了一位字节Android工程师的一篇...

99+

2022-11-12
怎么在Android应用中实现一个背景可滑动的登录界面效果

怎么在Android应用中实现一个背景可滑动的登录界面效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。实现思路主要列举一下实现过程过程中遇到的难点。如何使键盘...

99+

2023-05-31

android roi
微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

目录view结构js部分属性解释说明注意这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现，组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒...

99+

2023-01-28

小程序菜单激活状态微信小程序菜单激活状态