• QT开发教程：QScroller实现home界面滑动效果

    在上章我们学习了QScroller实现home界面滑动效果,但是该界面是实现的上下滑动效果,如果想模拟手机home滑动界面,则需要实现左右滑动效果.

    本章,则重写QStackedWidget类,来真正的模拟手机,来实现home界面左右滑动效果.

    1.SmoothStackedWidget类实现

    demo界面如下图所示(创建了4个子界面):

    (支持快滑,慢滑)

    如果是慢滑,则根据当前滑到的界面处于哪一页占比更多,则就跳到哪里.

    否则就是快滑,根据滑动的偏移值来决定跳转

    同样也支持边缘滑动检测(已在最边缘时,则滑动速率减慢,告诉用户已到边缘)

    2.代码实现

    头文件如下所示：

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

    1. #ifndef SMOOTHSTACKEDWIDGET_H
    2. #define SMOOTHSTACKEDWIDGET_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10.  
    11. class SmoothStackedWidget : public QStackedWidget
    12. {
    13.     Q_OBJECT
    14.  
    15. #define SMOOTH_MAX_MS   900                   //平滑滑动时的最大延迟时间
    16. #define SMOOTH_EDGE_MOVE_RATIO   0.14         //边缘移动系数,范围0~1,越低越慢
    17.  
    18.     typedef enum tagScrollMouseDragInfo {
    19.           MOUSE_RELEASE = 0,                       //鼠标离开
    20.           MOUSE_PRESS = 1,                         //按下
    21.           MOUSE_PRESS_MOVE = 2,                    //按下移动
    22.           MOUSE_RELEASE_MOVE = 3                   //鼠标离开并滑动
    23.     }Scroll_Mouse_Drag_INFO_E;
    24.  
    25.     typedef enum tagSmoothAnimationSwitchInfo {
    26.           SWITCH_PRE = -1,                      //切换上一页
    27.           SWITCH_NONE = 0,                      //不切换
    28.           SWITCH_NEXT = 1,                      //切换下一页
    29.     }AnimationSwitch_Drag_INFO_E;
    30.  
    31.     Scroll_Mouse_Drag_INFO_E m_dragFlag = MOUSE_RELEASE;
    32.     AnimationSwitch_Drag_INFO_E m_switchFlag = SWITCH_NONE;
    33.   
    34.     QWidget *m_parent;
    35.  
    36.     QWidget m_smoothWidget;
    37.  
    38.     int m_smoothCurrentIndex=-1;
    39.  
    40.     QPropertyAnimation *animation;
    41.  
    42.     float m_smoothMovePos;
    43.  
    44.     bool eventFilter(QObject *obj, QEvent *evt) override;
    45.  
    46.     void paintEvent(QPaintEvent *event) override;
    47.  
    48.     void resizeEvent(QResizeEvent *event) override;
    49.  
    50.     void SmoothLoadPixmap(bool isSmoothUpdate = false);
    51.     void SmoothStartMove();
    52.  
    53.     void SmoothMove(int offset);
    54.  
    55.     void SmoothAnimationStart(int startPos, int endPos, int durationMs);
    56.  
    57.     void SmoothAnimationInit();
    58.  
    59. public:
    60.     explicit SmoothStackedWidget(QWidget *parent = nullptr);
    61.  
    62.     int addWidget(QAbstractScrollArea *w);
    63.  
    64.     int addWidget(QWidget *w);
    65.  
    66.     void setCurrentIndex(int index);
    67.  
    68.     void removeWidget(QWidget *w);
    69.  
    70.     void IconUpdate();      //刷新页数标签
    71.  
    72.     void UpdateSmooth();
    73.  
    74. signals:
    75.  
    76. protected slots:
    77.     void OnSmoothAnimationFinished();
    78.  
    79. };
    80.  
    81. #endif // SMOOTHSTACKEDWIDGET_H

    其中eventFilter()函数如下所示:

    当鼠标(手指)按下移动时,则调用SmoothMove(offset),通过offset来动态显示滑动的界面.

    当鼠标(手指)松开后,则调用SmoothAnimationStart()来实现界面移动(到底是切换上一页、还是切换下一页、还是当前页).

    1. bool SmoothStackedWidget::eventFilter(QObject *obj, QEvent *evt)
    2. {
    3.     QMouseEvent *mouse =  dynamic_cast<QMouseEvent *>(evt);
    4.     QWidget *w =  dynamic_cast<QWidget *>(obj);
    5.  
    6.     static int pressPoint_x   = 0;          //按下的坐标
    7.     static int dragPoint_x    = -1;         //拖动时的坐标
    8.     static qint64 pressMSec ;
    9.  
    10.     if(mouse && w && animation->state() == QAbstractAnimation::Stopped)
    11.     {
    12.          if( mouse->type() ==QEvent::MouseButtonPress)    //首次按下
    13.         {
    14.            pressMSec = QDateTime::currentDateTime().toMSecsSinceEpoch();     //记录按下的时间
    15.            dragPoint_x  = mouse->pos().x();               //当前坐标
    16.            pressPoint_x = dragPoint_x;                    //按下的位置
    17.            m_dragFlag = MOUSE_PRESS;
    18.         }
    19.          else if(mouse->type() == QEvent::MouseButtonRelease &&
    20.                  m_dragFlag == MOUSE_PRESS)               //未移动
    21.         {
    22.            m_dragFlag = MOUSE_RELEASE;
    23.         }
    24.          else if(mouse->type() == QEvent::MouseMove &&
    25.                  m_dragFlag == MOUSE_PRESS)               //初次滑动,判断移动阀值,避免误操作
    26.         {
    27.             if(qAbs(dragPoint_x - mouse->pos().x()) > 3)     //判断移动阀值,避免误操作
    28.             {
    29.                dragPoint_x = mouse->pos().x();
    30.                SmoothStartMove();
    31.                m_dragFlag = MOUSE_PRESS_MOVE;
    32.             }
    33.         }
    34.          else if(mouse->type() == QEvent::MouseMove &&
    35.                  m_dragFlag== MOUSE_PRESS_MOVE )             //正在滑动
    36.         {
    37.             int offset = ( mouse->pos().x() - dragPoint_x);
    38.             SmoothMove(offset);
    39.             dragPoint_x = mouse->pos().x();
    40.         }
    41.         else if(mouse->type() == QEvent::MouseButtonRelease &&
    42.                 m_dragFlag == MOUSE_PRESS_MOVE)               //滑动结束,启动平滑滑动
    43.         {
    44.              int durationMs= QDateTime::currentDateTime().toMSecsSinceEpoch()-pressMSec;
    45.              SmoothAnimationStart(pressPoint_x,mouse->pos().x(),durationMs);
    46.              m_dragFlag = MOUSE_RELEASE;
    47.         }
    48.     }
    49.  
    50.     return QWidget::eventFilter(obj,evt);
    51. }

    SmoothAnimationStart()函数如下所示:

    1. void  SmoothStackedWidget::SmoothAnimationStart(int startPos, int endPos, int durationMs)
    2. {
    3.     int pixelPerSecond=qAbs(endPos - startPos)*1000/durationMs;       //计算每秒像素点
    4.     m_switchFlag = SWITCH_NONE;
    5.     int moveX = qAbs(m_smoothWidget.x());
    6.     float temp = width()*0.5;
    7.     int animationEndX;
    8.  
    9.     //慢速滑动(速度过慢||时间过长),则根据当前滑到哪里,就跳到哪里
    10.     if(pixelPerSecond<300 || durationMs > 1000) {
    11.         if(moveX < (temp)) {        //[0,width/2] = 上一页
    12.             if(currentIndex()==0) {
    13.                 animationEndX = -width();
    14.             } else {
    15.                 animationEndX = 0;
    16.                 m_switchFlag = SWITCH_PRE;
    17.             }
    18.         } else if(moveX < (temp*3)) {    //[width/2,width*3/2] = 当前一页
    19.             animationEndX = -width();
    20.         } else {
    21.             if(currentIndex()==(count()-1)) {   //[width*3/2,width*2] = 下一页
    22.                 animationEndX = -width();
    23.             } else {
    24.                 animationEndX = -width()*2;
    25.                 m_switchFlag = SWITCH_NEXT;
    26.             }
    27.         }
    28.  
    29.     } else {　　　　// 否则就是快速滑动
    30.         if(startPos < endPos) { //向右滑动
    31.             if(currentIndex()==0) {
    32.                 animationEndX = -width();
    33.             } else {
    34.                 animationEndX = 0;
    35.                 m_switchFlag = SWITCH_PRE;
    36.             }
    37.         } else {         //向左滑动
    38.             if(currentIndex()==(count()-1)) {
    39.                 animationEndX = -width();
    40.             } else {
    41.                 animationEndX = -width()*2;
    42.                 m_switchFlag = SWITCH_NEXT;
    43.             }
    44.         }
    45.     }
    46.  
    47.     //根据每秒滑动像素点,来计算滑动时长.
    48.     int animationDuration = durationMs;
    49.     float xOffsetRatio = qAbs(animationEndX - m_smoothWidget.x()) / (static_cast<float>(width())); //计算滑动占整屏比例
    50.  
    51.     if(animationDuration > (SMOOTH_MAX_MS * xOffsetRatio)) //滑动时间过大,则重置
    52.         animationDuration = SMOOTH_MAX_MS * xOffsetRatio;
    53.  
    54.  
    55.     animation->setDuration(animationDuration);
    56.     animation->setStartValue(m_smoothWidget.geometry());
    57.     animation->setEndValue(QRect(animationEndX, m_smoothWidget.y(), m_smoothWidget.width(), m_smoothWidget.height()));
    58.     animation->start();
    59. }

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

  • 相关阅读:
    Go 定时任务执行-cron
    基于 Debian 稳定分支发行版的Zephix 7 发布
    Selenium自动化测试框架
    JS手写数组扁平化（flat）方法
    8月19日PMP出成绩时间公布了！查询攻略请收好！
    VsCode开发Vue(开源框架使用ruoyi)
    数据结构题目收录（四）
    linux系统下，在vscode的命令行中调试python文件
    vue3使用swiper6.7.0写轮播图，按钮在轮播图外面
    Docker第一天作业
  • 原文地址：https://blog.csdn.net/m0_60259116/article/details/128087690