qt 滑动查看图片效果

录制_2022_09_08_17_42_06_223

功能： 

1 、可以用鼠标滑动、点击 查看图片，

2、可以用鼠标滚轮查看图片

3、左右按钮可自动隐藏和显示，点击切换图片

几个核心代码：

1. 图片按照顺序显示

当图片按照顺序命名，如（1,2,3,4,5,6,7,8,9,10,11，。。。）。程序从文件夹读取的顺序是混乱的，需要重新进行排序。 下面是完整的获取文件夹中的图片

  // 当前程序路径
    QDir dirCurrentPath =  QCoreApplication::applicationDirPath();
    // 获取图片所在文件夹
    QString filePath = dirCurrentPath.absoluteFilePath("picture");

    QDir dir(filePath);
    if (!dir.exists())
    {
        QMessageBox::critical(this,tr("文件夹不存在"),tr("文件夹找不到"));
        return;
    }

    //设置文件名称过滤器, 查看路径中后缀为.jpg 、.jpeg格式的文件
    QStringList filters;
    filters<<QString("*.jpg") << QString("*.jpeg");
    dir.setFilter(QDir::Files | QDir::NoSymLinks); //设置类型过滤器，只为文件格式
    dir.setNameFilters(filters);  //设置文件名称过滤器，只为filters格式

    //--2 获取当前路径下所有的文件名字
    QStringList fNames = dir.entryList(QDir::Files,QDir::Name);

    /*
    *   QCollator类
    *   QCollator使用QLocale和可选的排序策略进行初始化。它尝试用指定的值初始化collator。然后，可以使用collator以依赖于语言环境的方式对字符串进行比较和排序。
    */
    // 对文件进行排序  (1,2,3,4,5,6,7,8,9,10,11....)
    QCollator collator;
    collator.setNumericMode(true);
    std::sort(fNames.begin(), fNames.end(),
    [& collator](const QString & str1, const QString & str2)
    {
    return collator.compare(str1, str2) < 0;
    });

    // 拼接完整路径
    foreach (QString item, fNames) {
        fileNames<< dir.absoluteFilePath(item);
    }

2.  绘制图片用到的函数和变量

代码太多了， 全部写上看着费劲

struct ShowPicInfor
{
    ShowPicInfor() {}

    QRectF picRect;
    int picIndex;
    QString picPath;
};


class PictureScroll : public QWidget
{
    Q_OBJECT
public:
    explicit PictureScroll(QWidget *parent = nullptr);
    ~PictureScroll();

protected:
    void paintEvent(QPaintEvent *) override;
    void mousePressEvent(QMouseEvent *event) override;
    void mouseMoveEvent(QMouseEvent *event) override;
    void mouseReleaseEvent(QMouseEvent *event) override;
    void wheelEvent(QWheelEvent *event) override;
    virtual void resizeEvent(QResizeEvent *event) override;

signals:
     void selectPicture(QString picName);

public slots:
    void on_previousPic();
    void on_nextPic();

private:
     void paintPicture(QPainter &painter,const int picIndex, int deviation);//画图

    void  calculateTheMovingPosition(int x_pos);

private:
    int Mouse_Press;  //鼠标拖动值
    int Deviation;    //中心图片显示的位置
    int min_height;   // 控件高度
    int Now_Value;    // 中间显示的图片编号

    bool isSelected;  // 是否有图片被选中， 没有选中，鼠标移动不起作用

    int backgauge = 6;  // 预留边距
    QList<ShowPicInfor> listRect;     // 记录所有的图片
    QString selectPic;    // 当前选中图片名称

    QStringList fileNames;   // 图片名

};

3. 在QLabel上添加 QPushbutton

void MainWindow::addTwoNuttonsToTheLabel()
{
    QHBoxLayout *firstRow= new QHBoxLayout;//第一行放个水平布局器
    myLeftButton = new MyPushButton(QIcon(":/img/ico/left.png"));
    connect(myLeftButton,&MyPushButton::click,[=](){ emit fPicScroll->previousPic(); });

    firstRow->addWidget(myLeftButton);

    // 水平
    QSpacerItem* hSpacer = new QSpacerItem(20, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);
    firstRow->addSpacerItem(hSpacer);

    //    // 垂直
    //    QSpacerItem* vSpacer = new QSpacerItem(20, 20, QSizePolicy::Minimum, QSizePolicy::Expanding);
    //    firstRow->addSpacerItem(vSpacer);

    myRightButton = new MyPushButton(QIcon(":/img/ico/right.png"));
    connect(myRightButton,&MyPushButton::click,[=](){emit fPicScroll->nextPic();});

    firstRow->addWidget(myRightButton);
    ui->label->setLayout(firstRow);
}

4. 按钮的显示和 点击

用ispress 添加点击灰色背景，mouserEnter 判断是否要绘制

class MyPushButton : public QPushButton
{
    Q_OBJECT
public:
    MyPushButton(const QIcon &icon);

protected:
    void paintEvent(QPaintEvent *) override;
    virtual void mousePressEvent(QMouseEvent *event);
    virtual void mouseReleaseEvent(QMouseEvent *event);

    virtual void enterEvent(QEvent *event);
    virtual void leaveEvent(QEvent *event);

signals:
    void click();

  private :
    QIcon m_icon;
    bool isPress;
    bool mouseEnter;

};