QT桌面(实现界面的滑动切换)

这篇具有很好参考价值的文章主要介绍了QT桌面(实现界面的滑动切换)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在ARM Linux中使用QT如何实现滑动翻页切换界面的效果呢?在ARM中是没有自带的鼠标的,那么我们如何实现滑动翻页呢?经过测试发现在ARM中运行QT程序也是可以通过重写鼠标事件来捕获触屏动作的,在ARM中滑动屏幕被定义成了鼠标左键事件,那么这样就有思路了,重写鼠标事件

一、使用QStackedLayout管理主界面

这里使用QStackedLayout来管理创建出来的几个主界面,这里我创建三个主界面。并且使用QStackedLayout将这几个界面管理起来。

    QStackedLayout* m_stackedLayout;
    QWidget* Home_Page_1;
    QWidget* Home_Page_2;
    QWidget* Home_Page_3;
	
    m_stackedLayout = new QStackedLayout(this);
    Home_Page_1 = new QWidget();
    Home_Page_2 = new QWidget();
    Home_Page_3 = new QWidget();
    m_stackedLayout->addWidget(Home_Page_1);
    m_stackedLayout->addWidget(Home_Page_2);
    m_stackedLayout->addWidget(Home_Page_3);

编写主界面初始化函数:
这里有三个主界面故需要三个界面初始化函数。
这里可以先做的简单一点,在每个界面都创建一个按键或者标签进行区分。

/*主界面1*/
void Widget::InitHomePage1()
{
	QPushButton* button = new QPushButton(Home_Page_1);
	button->setText("I am page1");
}

/*主界面2*/
void Widget::InitHomePage1()
{
	QPushButton* button = new QPushButton(Home_Page_2);
	button->setText("I am page2");
}

/*主界面3*/
void Widget::InitHomePage3()
{
	QPushButton* button = new QPushButton(Home_Page_3);
	button->setText("I am page3");
}

二、重写鼠标处理事件

滑动包括按下、移动、和释放三个步骤故需要重写下面的三个鼠标事件。

protected:
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);

需要的参数:
这里需要将按下的起始坐标和结束坐标都记录下来,最后做一个计算判断是否要进行翻页。

    int m_startPosX;
    int m_curPosX;

鼠标事件核心代码:
1.在按下屏幕的时候需要记录下按下的x坐标

2.这部分主要就是借助QStackedLayout和QPropertyAnimation来进行操作。

当鼠标在当前窗口内向右滑动超过30个像素时,会执行"向右翻页"操作;当鼠标向左滑动超过30个像素时,会执行"向左翻页"操作。

具体来说,该函数首先计算鼠标移动的位移差(delta),然后根据位移差的正负判断执行哪种翻页操作。

如果是向右翻页操作,会获取当前显示的窗口对象(currentWidget)和上一个窗口对象(prevWidget),并分别创建两个QPropertyAnimation对象,设置移动动画的起始和终止位置,以及动画的持续时间。然后,当前窗口对象会执行向右移动的动画,同时设置上一个窗口对象的初始位置在当前窗口对象的左侧,再让上一个窗口对象执行从左向右移动的动画。最后,设置当前显示的窗口对象为上一个窗口对象。

如果是向左翻页操作,逻辑与向右翻页类似,只是获取的是下一个窗口对象(nextWidget),并让当前窗口对象先执行向左移动的动画,然后设置下一个窗口对象的初始位置在当前窗口对象的右侧,再让下一个窗口对象执行从右向左移动的动画。最后,设置当前显示的窗口对象为下一个窗口对象。

3.滑动结束后清空参数值

void Widget::mousePressEvent(QMouseEvent *event)
{
    m_startPosX = event->x();
    QWidget::mousePressEvent(event);
}

void Widget::mouseMoveEvent(QMouseEvent *event)
{
    // 鼠标移动事件
    m_curPosX = event->x();
    int delta = m_curPosX - m_startPosX; // 计算位移差
    if (delta > 30)
    {
        // 向右翻页操作
        int currentIndex = m_stackedLayout->currentIndex();
        if (currentIndex > 0) {
            QWidget *currentWidget = m_stackedLayout->currentWidget();
            QWidget *prevWidget = m_stackedLayout->widget(currentIndex - 1);
            QPropertyAnimation *animation = new QPropertyAnimation(currentWidget, "pos");
            animation->setDuration(500);
            animation->setStartValue(QPoint(0, 0));
            animation->setEndValue(QPoint(width(), 0));
            animation->start(QAbstractAnimation::DeleteWhenStopped);
            m_stackedLayout->setCurrentWidget(prevWidget);
            prevWidget->setGeometry(-width(), 0, width(), height());
            QPropertyAnimation *animation2 = new QPropertyAnimation(prevWidget, "pos");
            animation2->setDuration(500);
            animation2->setStartValue(QPoint(-width(), 0));
            animation2->setEndValue(QPoint(0, 0));
            animation2->start(QAbstractAnimation::DeleteWhenStopped);
        }
    }
    else if (delta < -30)
    {
        // 向左翻页操作
        int currentIndex = m_stackedLayout->currentIndex();
        if (currentIndex < m_stackedLayout->count() - 1) {
            QWidget *currentWidget = m_stackedLayout->currentWidget();
            QWidget *nextWidget = m_stackedLayout->widget(currentIndex + 1);
            QPropertyAnimation *animation = new QPropertyAnimation(currentWidget, "pos");
            animation->setDuration(500);
            animation->setStartValue(QPoint(0, 0));
            animation->setEndValue(QPoint(-width(), 0));
            animation->start(QAbstractAnimation::DeleteWhenStopped);
            m_stackedLayout->setCurrentWidget(nextWidget);
            nextWidget->setGeometry(width(), 0, width(), height());
            QPropertyAnimation *animation2 = new QPropertyAnimation(nextWidget, "pos");
            animation2->setDuration(500);
            animation2->setStartValue(QPoint(width(), 0));
            animation2->setEndValue(QPoint(0, 0));
            animation2->start(QAbstractAnimation::DeleteWhenStopped);
        }
    }


    // 保存当前位置
    m_startPosX = m_curPosX;

    QWidget::mouseMoveEvent(event);
}

void Widget::mouseReleaseEvent(QMouseEvent *event)
{
    // 鼠标释放事件
    m_startPosX = 0;
    m_curPosX = 0;
    QWidget::mouseReleaseEvent(event);
}

总结

学习完这篇文章大家就可以自己去实现翻页的效果啦,有没有感觉非常的炫酷呢。文章来源地址https://www.toymoban.com/news/detail-458524.html

到了这里,关于QT桌面(实现界面的滑动切换)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT之多个界面相互切换 (stackedWidget控件)

    stackedWidget控件:   可以自由在多个widget切换,可以通过点击顶部菜单,显示不同界面,在实际开发中应用很广泛。 1. 添加控件, 在设计界面左侧添加 stackedWidget控件 2. 增加几个  widget 界面  3. 将这几个 widget 插入到 stackedWidget 首先定义 一个枚举量, 存放每个界面的编号

    2024年02月11日
    浏览(93)
  • QT之一个UI里边多界面切换

    环境:VS2019+QT_tools 从网上查看了许多大神的帖子,先将多界面切换的方法总结如下: 1.可以通过QT Designer中添加Containers控件里的Stacked Widget实现同一个UI里的页面切换,可以通过鼠标右键或者代码实现增减页操作 2.可以通过建立多个UI文件,然后设置选择其中一个显示,其他隐

    2024年02月11日
    浏览(34)
  • QT+C++桌面程序窗体框架模板-中英文切换-文件打开历史记录-工具选项设置

    程序示例精选 QT+C++桌面程序窗体框架模板-中英文切换-文件打开历史记录-工具选项设置 如需安装运行环境或远程调试,见文章底部个人 QQ 名片,由专业技术人员远程协助! 这篇博客针对《QT+C++桌面程序窗体框架模板-中英文切换-文件打开历史记录-工具选项设置》编写代码,

    2024年01月24日
    浏览(56)
  • 使用JavaScript实现页面滑动切换效果

      使用JavaScript实现页面滑动切换效果 在现代Web页面设计中,页面滑动切换效果已经成为了一种常见的设计要求,能够提升用户体验,增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先,我们需要在HTML中添加一些基础结构和样式。以下是一个简单的例子:   在

    2024年02月13日
    浏览(56)
  • uniapp实现tabs切换(可滑动)

    继续加油呀~

    2024年02月11日
    浏览(43)
  • 【QT】C++和QML使用多线程优化界面切换卡顿的方法

    qt提供了一种声明式语言qml,可以使用一些可视组件以及这些组件之间的交互来描述用户界面,而c++可以只负责后台逻辑的处理,将界面和后台分离开来,由qml来做UI界面,c++负责后端处理,对我个人来说,这样的方式大大的方便了对界面和逻辑的修改和维护; 由于UI界面是工

    2024年01月19日
    浏览(43)
  • 微信小程序实现滑动/点击切换Tab

    👏 swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏! 2.1 scroll-view实现tab列表 scroll-view: 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px。 scroll-x(bool

    2024年01月19日
    浏览(114)
  • 快速掌握微信小程序 tab 切换的实现技巧(可滑动切换)

    微信小程序中的 tab 切换功能可以说是用户所需的一个基础功能。本文将介绍如何通过微信小程序实现 tab 切换功能,为用户带来更为便捷和高效的小程序体验。 其实这个小功能的实现非常简单,只需要通过一个标识控制选项的样式及显示的内容,当我们触发点击或者滑动事

    2024年02月11日
    浏览(83)
  • Taro+vue3 实现滑动列表 时切换电影

    以上代码是滑动的组件 

    2024年01月16日
    浏览(44)
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    @ 目录 原理 创建布局 创建分布函数 创建动效 创建绑定数据 细节调整 首张卡片的处理 为卡片添加裁剪 跳转到最后一张卡片 项目地址 看了上一篇博文的评论,大家对MAUI还是比较感兴趣的,非常感谢大家的关注,这个专栏我争取周更😉。 App之间的多任务切换相信你们都很熟

    2024年02月02日
    浏览(92)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包