当前位置：首页 > news >正文

【QT】QT实现鼠标左右滑动切换图片

news 2025/8/14 9:29:06

QT实现鼠标左右滑动切换图片

- 实现思路：
- 示例代码：
- 功能说明：
- 使用说明：

实现思路：

1、在资源文件(qrc)中添加6张800x480像素的图片

2、使用QStackedWidget管理多个图片页面

3、重写鼠标事件处理函数实现滑动检测：

mousePressEvent：记录起始位置
mouseMoveEvent：计算滑动距离
mouseReleaseEvent：根据滑动距离切换图片

4、添加滑动动画效果增强用户体验

示例代码：

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QStackedWidget>
#include <QLabel>
#include <QPropertyAnimation>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void mousePressEvent(QMouseEvent *event) override;void mouseMoveEvent(QMouseEvent *event) override;void mouseReleaseEvent(QMouseEvent *event) override;private:Ui::Widget *ui;QStackedWidget *stackedWidget;QPoint startPos;  // 鼠标起始位置int currentIndex = 0;  // 当前图片索引int imageCount = 6;  // 图片总数QPropertyAnimation *animation;  // 切换动画void loadImages();  // 加载图片void switchImage(int direction);  // 切换图片方向: -1左滑, 1右滑
};#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QMouseEvent>
#include <QPixmap>
#include <QEasingCurve>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置窗口固定大小setFixedSize(800, 480);// 创建堆叠窗口stackedWidget = new QStackedWidget(this);stackedWidget->setGeometry(0, 0, 800, 480);// 初始化动画animation = new QPropertyAnimation(stackedWidget, "geometry");animation->setDuration(300);  // 动画时长300msanimation->setEasingCurve(QEasingCurve::OutCubic);  // 平滑动画曲线// 加载图片loadImages();
}Widget::~Widget()
{delete ui;delete animation;
}void Widget::loadImages()
{for (int i = 0; i < imageCount; ++i) {QLabel *imageLabel = new QLabel(stackedWidget);QPixmap pixmap(QString(":/res/image%1.png").arg(i+1));// 缩放图片填充整个标签pixmap = pixmap.scaled(800, 480, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);imageLabel->setPixmap(pixmap);imageLabel->setAlignment(Qt::AlignCenter);stackedWidget->addWidget(imageLabel);}stackedWidget->setCurrentIndex(currentIndex);
}void Widget::mousePressEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton) {startPos = event->pos();  // 记录起始位置}
}void Widget::mouseMoveEvent(QMouseEvent *event)
{if (event->buttons() & Qt::LeftButton) {QPoint delta = event->pos() - startPos;// 水平移动堆叠窗口产生滑动效果stackedWidget->move(delta.x(), 0);}
}void Widget::mouseReleaseEvent(QMouseEvent *event)
{QPoint endPos = event->pos();int deltaX = endPos.x() - startPos.x();// 水平滑动距离超过100像素才切换if (abs(deltaX) > 100) {int direction = (deltaX > 0) ? -1 : 1;  // 右滑上一张，左滑下一张switchImage(direction);} else {// 未达到切换阈值，恢复原位animation->setStartValue(stackedWidget->geometry());animation->setEndValue(QRect(0, 0, 800, 480));animation->start();}
}void Widget::switchImage(int direction)
{// 计算新索引int newIndex = (currentIndex + direction + imageCount) % imageCount;// 设置动画起始位置animation->setStartValue(stackedWidget->geometry());// 根据方向设置动画结束位置if (direction < 0) {  // 向右滑动animation->setEndValue(QRect(800, 0, 800, 480));} else {  // 向左滑动animation->setEndValue(QRect(-800, 0, 800, 480));}// 连接动画完成信号connect(animation, &QPropertyAnimation::finished, [=]() {// 更新当前索引currentIndex = newIndex;stackedWidget->setCurrentIndex(currentIndex);// 重置位置并显示新图片stackedWidget->setGeometry(0, 0, 800, 480);// 断开连接避免重复disconnect(animation, &QPropertyAnimation::finished, nullptr, nullptr);});animation->start();
}