Qt實現(xiàn)界面滑動切換效果的思路詳解
一、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;
}五、源碼地址
源碼地址： 啊淵 / QT博客案例
到此這篇關(guān)于Qt實現(xiàn)界面滑動切換效果的文章就介紹到這了,更多相關(guān)Qt界面滑動切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了C語言實現(xiàn)頭插法建立單鏈表的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了C++智能指針之shared_ptr，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要給大家介紹了關(guān)于C語言之預(yù)處理命令的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
C++使用Kruskal和Prim算法實現(xiàn)最小生成樹
這篇文章主要介紹了C++使用Kruskal和Prim算法實現(xiàn)最小生成樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Visitor模式經(jīng)常用于將更新的設(shè)計封裝在一個類中，并且由待更改的類提供一個接受接口，其關(guān)鍵技術(shù)在于雙分派技術(shù)，本文主要介紹 C++17 里的 Visitor 模式的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
七夕節(jié)到了還不快給你的朋友安排上這只咕呱小青蛙？本文將用Matlab繪制一個可愛的咕呱小青蛙，感興趣的小伙伴可以動手嘗試一下2022-08-08
這篇文章主要為大家詳細介紹了C語言實現(xiàn)簡易連連看游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
C++基礎(chǔ) class、struct、union詳細
這篇文章主要 給大家介紹的是C++基礎(chǔ) class、struct、union，主要由三部分組成，分別是、類class、結(jié)構(gòu)體struct、共用體union,需要的朋友可以參考一下2021-09-09
C語言單鏈表實現(xiàn)學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細介紹了C語言單鏈表實現(xiàn)學(xué)生管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了C語言中字符的輸入輸出以及計算字符個數(shù)的方法,是C語言入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11