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

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

实现思路：

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

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

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

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

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

示例代码：

widget.h

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QStackedWidget>
#include <QLabel>
#include <QPropertyAnimation>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    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

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);  // 动画时长300ms
    animation->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();
}

目录结构如下：

演示：

功能说明：

1、图片显示：6张图片通过QStackedWidget管理，每张填充整个窗口

2、滑动切换：

向右滑动（鼠标从左向右拖拽）→ 上一张
向左滑动（鼠标从右向左拖拽）→ 下一张

3、动画效果：平滑的滑动动画，提升用户体验

4、循环切换：最后一张向右滑动回到第一张，第一张向左滑动到最后一张

使用说明：

1、在窗口任意位置按住鼠标左键

2、水平拖动鼠标超过100像素距离

3、释放鼠标完成图片切换