Qt重寫QStackedWidget模擬實現home界面滑動效果
在上章我們學習瞭QScroller實現home界面滑動效果,但是該界面是實現的上下滑動效果,如果想模擬手機home滑動界面,則需要實現左右滑動效果.
本章,則重寫QStackedWidget類,來真正的模擬手機,來實現home界面左右滑動效果.
1.SmoothStackedWidget類實現
demo界面如下圖所示(創建瞭4個子界面):
(支持快滑,慢滑):
如果是慢滑,則根據當前滑到的界面處於哪一頁占比更多,則就跳到哪裡.
否則就是快滑,根據滑動的偏移值來決定跳轉
同樣也支持邊緣滑動檢測(已在最邊緣時,則滑動速率減慢,告訴用戶已到邊緣):
2.代碼實現
頭文件如下所示:
#ifndef SMOOTHSTACKEDWIDGET_H #define SMOOTHSTACKEDWIDGET_H #include <QObject> #include <QWidget> #include <QStackedWidget> #include <QAbstractScrollArea> #include <QPixmap> #include <QPropertyAnimation> class SmoothStackedWidget : public QStackedWidget { Q_OBJECT #define SMOOTH_MAX_MS 900 //平滑滑動時的最大延遲時間 #define SMOOTH_EDGE_MOVE_RATIO 0.14 //邊緣移動系數,范圍0~1,越低越慢 typedef enum tagScrollMouseDragInfo { MOUSE_RELEASE = 0, //鼠標離開 MOUSE_PRESS = 1, //按下 MOUSE_PRESS_MOVE = 2, //按下移動 MOUSE_RELEASE_MOVE = 3 //鼠標離開並滑動 }Scroll_Mouse_Drag_INFO_E; typedef enum tagSmoothAnimationSwitchInfo { SWITCH_PRE = -1, //切換上一頁 SWITCH_NONE = 0, //不切換 SWITCH_NEXT = 1, //切換下一頁 }AnimationSwitch_Drag_INFO_E; Scroll_Mouse_Drag_INFO_E m_dragFlag = MOUSE_RELEASE; AnimationSwitch_Drag_INFO_E m_switchFlag = SWITCH_NONE; QWidget *m_parent; QWidget m_smoothWidget; int m_smoothCurrentIndex=-1; QPropertyAnimation *animation; float m_smoothMovePos; bool eventFilter(QObject *obj, QEvent *evt) override; void paintEvent(QPaintEvent *event) override; void resizeEvent(QResizeEvent *event) override; void SmoothLoadPixmap(bool isSmoothUpdate = false); void SmoothStartMove(); void SmoothMove(int offset); void SmoothAnimationStart(int startPos, int endPos, int durationMs); void SmoothAnimationInit(); public: explicit SmoothStackedWidget(QWidget *parent = nullptr); int addWidget(QAbstractScrollArea *w); int addWidget(QWidget *w); void setCurrentIndex(int index); void removeWidget(QWidget *w); void IconUpdate(); //刷新頁數標簽 void UpdateSmooth(); signals: protected slots: void OnSmoothAnimationFinished(); }; #endif // SMOOTHSTACKEDWIDGET_H
其中eventFilter()函數如下所示:
當鼠標(手指)按下移動時,則調用SmoothMove(offset),通過offset來動態顯示滑動的界面.
當鼠標(手指)松開後,則調用SmoothAnimationStart()來實現界面移動(到底是切換上一頁、還是切換下一頁、還是當前頁).
bool SmoothStackedWidget::eventFilter(QObject *obj, QEvent *evt) { QMouseEvent *mouse = dynamic_cast<QMouseEvent *>(evt); QWidget *w = dynamic_cast<QWidget *>(obj); static int pressPoint_x = 0; //按下的坐標 static int dragPoint_x = -1; //拖動時的坐標 static qint64 pressMSec ; if(mouse && w && animation->state() == QAbstractAnimation::Stopped) { if( mouse->type() ==QEvent::MouseButtonPress) //首次按下 { pressMSec = QDateTime::currentDateTime().toMSecsSinceEpoch(); //記錄按下的時間 dragPoint_x = mouse->pos().x(); //當前坐標 pressPoint_x = dragPoint_x; //按下的位置 m_dragFlag = MOUSE_PRESS; } else if(mouse->type() == QEvent::MouseButtonRelease && m_dragFlag == MOUSE_PRESS) //未移動 { m_dragFlag = MOUSE_RELEASE; } else if(mouse->type() == QEvent::MouseMove && m_dragFlag == MOUSE_PRESS) //初次滑動,判斷移動閥值,避免誤操作 { if(qAbs(dragPoint_x - mouse->pos().x()) > 3) //判斷移動閥值,避免誤操作 { dragPoint_x = mouse->pos().x(); SmoothStartMove(); m_dragFlag = MOUSE_PRESS_MOVE; } } else if(mouse->type() == QEvent::MouseMove && m_dragFlag== MOUSE_PRESS_MOVE ) //正在滑動 { int offset = ( mouse->pos().x() - dragPoint_x); SmoothMove(offset); dragPoint_x = mouse->pos().x(); } else if(mouse->type() == QEvent::MouseButtonRelease && m_dragFlag == MOUSE_PRESS_MOVE) //滑動結束,啟動平滑滑動 { int durationMs= QDateTime::currentDateTime().toMSecsSinceEpoch()-pressMSec; SmoothAnimationStart(pressPoint_x,mouse->pos().x(),durationMs); m_dragFlag = MOUSE_RELEASE; } } return QWidget::eventFilter(obj,evt); }
SmoothAnimationStart()函數如下所示:
void SmoothStackedWidget::SmoothAnimationStart(int startPos, int endPos, int durationMs) { int pixelPerSecond=qAbs(endPos - startPos)*1000/durationMs; //計算每秒像素點 m_switchFlag = SWITCH_NONE; int moveX = qAbs(m_smoothWidget.x()); float temp = width()*0.5; int animationEndX; //慢速滑動(速度過慢||時間過長),則根據當前滑到哪裡,就跳到哪裡 if(pixelPerSecond<300 || durationMs > 1000) { if(moveX < (temp)) { //[0,width/2] = 上一頁 if(currentIndex()==0) { animationEndX = -width(); } else { animationEndX = 0; m_switchFlag = SWITCH_PRE; } } else if(moveX < (temp*3)) { //[width/2,width*3/2] = 當前一頁 animationEndX = -width(); } else { if(currentIndex()==(count()-1)) { //[width*3/2,width*2] = 下一頁 animationEndX = -width(); } else { animationEndX = -width()*2; m_switchFlag = SWITCH_NEXT; } } } else { // 否則就是快速滑動 if(startPos < endPos) { //向右滑動 if(currentIndex()==0) { animationEndX = -width(); } else { animationEndX = 0; m_switchFlag = SWITCH_PRE; } } else { //向左滑動 if(currentIndex()==(count()-1)) { animationEndX = -width(); } else { animationEndX = -width()*2; m_switchFlag = SWITCH_NEXT; } } } //根據每秒滑動像素點,來計算滑動時長. int animationDuration = durationMs; float xOffsetRatio = qAbs(animationEndX - m_smoothWidget.x()) / (static_cast<float>(width())); //計算滑動占整屏比例 if(animationDuration > (SMOOTH_MAX_MS * xOffsetRatio)) //滑動時間過大,則重置 animationDuration = SMOOTH_MAX_MS * xOffsetRatio; animation->setDuration(animationDuration); animation->setStartValue(m_smoothWidget.geometry()); animation->setEndValue(QRect(animationEndX, m_smoothWidget.y(), m_smoothWidget.width(), m_smoothWidget.height())); animation->start(); }
到此這篇關於Qt重寫QStackedWidget模擬實現home界面滑動效果的文章就介紹到這瞭,更多相關Qt QStackedWidget界面滑動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Qt中QStackedWidget控件的使用
- python使用pynput庫操作、監控你的鼠標和鍵盤
- 你知道怎麼用Python監控聊天記錄嗎
- 利用Python寫個摸魚監控進程
- Pygame實現監聽鼠標示例詳解