当前位置：网站首页>QT realizes interface sliding switching effect

QT realizes interface sliding switching effect

2022-07-04 19:25:00 【Sanlei Technology】

Catalog

One 、Qt Realize interface sliding switching effect

Two 、 Design thinking

3、 ... and 、 Main function explanation

Four 、 Source code parsing

4、1 Initialization interface

4、2 Slide effect of previous page

4、3 Next page slide effect

4、4 Animation end processing

5、 ... and 、 Source code address

6、 ... and 、 Other articles

One 、Qt Realize interface sliding switching effect

The effect is as follows , Sliding effect moves up and down the screen .

Two 、 Design thinking

utilize QStackWidget Store pages , Because there are fewer pages , So I store all the pages directly in QStachWidget in , If there are relatively many pages , You can use the method of rendering .

And then use show Function shows the contents of two pages at the same time , This is very important , If you use setCurrentIndex Only one interface will be displayed , In this way, there will not be two interfaces at the same time .

Use QPropertyAnimation as well as QParallelAnimationGroup To animate interface switching .

When the page moves left , Remove the original screen to the left , Move the current interface from the right to the current interface position .

When the page moves to the right , Remove the original screen to the right , Move the current interface from the left to the display position

3、 ... and 、 Main function explanation

QPropertyAnimation： Animation class , If you only control the animation of one interface, you can directly set the animation effect ,start Function to start the animation effect .

QParallelAnimationGroup： Animation group class , Control a set of animations to run at the same time , We control two interfaces here, so we need to use QParallelAnimationGroup To control the animation of the two interfaces .

QStackedWidget： Used to store multiple interfaces , When the interface needs to be displayed, you can use setCurrentIndex Show the current page .

Four 、 Source code parsing

4、1 Initialization interface

stay QStatchWidget Add multiple interfaces in . Because this is the initialization of the game interface , Every page 25 topic , Altogether 515 questions , The total number of pages turned 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(" the previous ", this))
    , m_ptrBtnNext(new QPushButton(" next ", this))
    , m_bDonghua(false)

{
    //  Add interface 
    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);
    }
    //  Set the index of the currently displayed interface .
    m_ptrStackWidget->setCurrentIndex(0);
    //  Add previous button 
    m_ptrLayoutMain->addWidget(m_ptrBtnPre);
    //  Add the displayed interface 
    m_ptrLayoutMain->addWidget(m_ptrStackWidget);
    //  Add next page button 
    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 Slide effect of previous page

Get the width and height of the display interface , You need to use the mobile interface .

m_bDonghua： Record whether it is currently in the animation effect , If you don't turn the page in the animation effect （ If not set , Ghosting will appear during fast switching ）

    m_ptrStackWidget->setCurrentIndex(PreIndex);
    m_ptrStackWidget->widget(currentIndex)->show();

animation1： Set current page （ Before switching ） Animation effect of face page , You can see startValue and endValue, Is to remove the off screen from the original screen position .

animation2： Set the animation effect about to switch to the interface , You can see startValue and endValue, Is to remove the middle of the screen from the off screen position .

When the animation of the interface is executed at the same time, the sliding effect appears .

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