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

 更新时间:2022年07月05日 15:37:34   作者:三雷科技  
这篇文章主要介绍了Qt实现界面滑动切换效果,主要包括设计思路及主要函数讲解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、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界面滑动切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Visual Studio2000系列版本安装OpenGL的图文教程

    Visual Studio2000系列版本安装OpenGL的图文教程

    这篇文章主要介绍了Visual Studio2000系列版本安装OpenGL的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 基于C语言实现创意多彩贪吃蛇游戏

    基于C语言实现创意多彩贪吃蛇游戏

    这篇文章主要介绍了如何利用C语言实现一个创意多彩贪吃蛇游戏,这是一个纯C语言外加easyx库的绘图函数制作而成的有趣小游戏,无需引入额外资源,感兴趣的可以动手尝试一下
    2022-08-08
  • Qt利用QNetwork实现上传数据的示例代码

    Qt利用QNetwork实现上传数据的示例代码

    这篇文章主要为大家详细介绍了Qt如何利用QNetwork实现上传数据的 功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-02-02
  • CrashRpt使用案例详解

    CrashRpt使用案例详解

    这篇文章主要介绍了CrashRpt使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • c++中的system(

    c++中的system("pause")的作用和含义解析

    这篇文章主要介绍了c++中system("pause")的作用和含义,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-03-03
  • C++ 继承,虚继承(内存结构)详解

    C++ 继承,虚继承(内存结构)详解

    C++继承和虚继承的内存模型是一个老生常谈的话题,实现方法主要依赖于编译器,本文从多个角度通过代码详解C++中虚继承的内存模型知识,感兴趣的朋友跟随小编一起看看吧
    2021-09-09
  • C语言使用函数实现字符串部分复制问题

    C语言使用函数实现字符串部分复制问题

    这篇文章主要介绍了C语言使用函数实现字符串部分复制问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • C语言实现图书管理系统(文件数据库)

    C语言实现图书管理系统(文件数据库)

    这篇文章主要为大家详细介绍了C语言实现图书管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • C语言 栈的表示和实现详细介绍

    C语言 栈的表示和实现详细介绍

    这篇文章主要介绍了C语言 栈的表示和实现详细介绍的相关资料,需要的朋友可以参考下
    2016-12-12
  • C++对象排序的比较你了解吗

    C++对象排序的比较你了解吗

    这篇文章主要为大家详细介绍了C++对象排序的比较,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02

最新评论