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

举报
yd_274589494 发表于 2023/05/26 19:53:25 2023/05/26
【摘要】 @TOC 前言在ARM Linux中使用QT如何实现滑动翻页切换界面的效果呢?在ARM中是没有自带的鼠标的,那么我们如何实现滑动翻页呢?经过测试发现在ARM中运行QT程序也是可以通过重写鼠标事件来捕获触屏动作的,在ARM中滑动屏幕被定义成了鼠标左键事件,那么这样就有思路了,重写鼠标事件。 一、使用QStackedLayout管理主界面这里使用QStackedLayout来管理创建出来的几个主...

@TOC


前言

在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);
}

总结

学习完这篇文章大家就可以自己去实现翻页的效果啦,有没有感觉非常的炫酷呢。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。