Qt實現(xiàn)界面滑動切換效果的思路詳解

更新時間：2022年07月05日 15:37:34 作者：三雷科技

這篇文章主要介紹了Qt實現(xiàn)界面滑動切換效果,主要包括設(shè)計思路及主要函數(shù)講解，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、Qt實現(xiàn)界面滑動切換效果

效果如下圖，滑動效果移動上下屏幕。

二、設(shè)計思路

利用QStackWidget將頁面存儲起來，因為頁面比較少，因此我直接將所有的頁面存儲在QStachWidget中，如果頁面相對較多，可以使用使用使渲染的方式。

然后使用show函數(shù)同時展示兩個頁面的內(nèi)容，這個很重要，如果使用setCurrentIndex只會展示一個界面，這樣不會出現(xiàn)兩個界面同時存在的情況。

使用QPropertyAnimation以及QParallelAnimationGroup來設(shè)置界面切換動畫。

當(dāng)頁面左移動時，將原始界面移除屏幕到左邊，將當(dāng)前界面從右邊移動至現(xiàn)在界面位置。

當(dāng)頁面右移動時，將原始界面移除屏幕到右邊，將當(dāng)前界面從左邊移動至屏幕展示位置

三、主要函數(shù)講解

QPropertyAnimation：動畫類，如果僅控制一個界面的動畫可以直接設(shè)置動畫效果后，start函數(shù)啟動動畫效果。

QParallelAnimationGroup：動畫組類，控制一組動畫同時運行，我們這里控制了兩個界面因此需要使用QParallelAnimationGroup來控制兩個界面的動畫。

QStackedWidget：用于存儲多個界面，當(dāng)界面需要展示的時候可以通過setCurrentIndex展示當(dāng)前頁面。

四、源代碼解析

4、1 初始化界面

在QStatchWidget中添加多個界面。因為這是游戲界面初始化，每一頁有25題，一共有515道題目，翻頁的總數(shù)等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);
    }
    // 設(shè)置當(dāng)前展示的界面索引。
    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：記錄當(dāng)前是否在動畫效果中，如果在動畫效果中不進行翻頁（如果不設(shè)置，在快速切換的時候會出現(xiàn)重影）

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

animation1：設(shè)置當(dāng)前頁（未切換前）面頁面的動畫效果，你可以看到startValue和endValue，是從原始屏幕位置移除屏幕外。

animation2：設(shè)置即將切換到界面的動畫效果，你可以看到startValue和endValue，是從屏幕外位置移除屏幕正中間。

當(dāng)界面的動畫同時執(zhí)行的時候就出現(xiàn)滑動效果。

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：記錄當(dāng)前是否在動畫效果中，如果在動畫效果中不進行翻頁（如果不設(shè)置，在快速切換的時候會出現(xiàn)重影）

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

animation1：設(shè)置當(dāng)前頁（未切換前）面頁面的動畫效果，你可以看到startValue和endValue，是從原始屏幕位置移除屏幕外。

animation2：設(shè)置即將切換到界面的動畫效果，你可以看到startValue和endValue，是從屏幕外位置移除屏幕正中間。

當(dāng)界面的動畫同時執(zhí)行的時候就出現(xiàn)滑動效果。

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 動畫結(jié)束處理

動畫結(jié)束后需要將上一界面進行隱藏，在切換頁面的時候已經(jīng)將上一頁面的指針保存發(fā)送過來了。

 group->setProperty(
        "widget", QVariant::fromValue(m_ptrStackWidget->widget(currentIndex)));

因此在動畫結(jié)束時，獲取上一頁面的指針，然后再修改其隱藏狀態(tài)即可。

void LevelMainWidget::onAnimationFinished()
{
    QParallelAnimationGroup* group = (QParallelAnimationGroup*)sender();
    QWidget* widget = group->property("widget").value<QWidget*>();
    if (nullptr != widget) {
        widget->hide();
    }
    m_bDonghua = false;
}