introduction

This system supports, automatic playback, left and right drag switch, click list switch, click button switch; it is a standard image browsing software.

Windows picture browser, you can view the pictures in the current folder, scroll up, scroll down and play automatically;

This system adds a list;

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓

Realize function

1. Browse the folders in the computer and list the pictures in the current folder;

2. Click a picture on the list with the mouse, and the picture will be displayed;

3. You can control and browse the previous and next pictures of the current picture;

4. Realize the mouse to drag the picture, swipe left, and swipe right to switch pictures;

5. Realize the start and stop control of automatic playback.

Effect

Realize the knowledge used for picture browsing

Including widgets, layouts, events, object models and container classes, graphical views, model/view programming, and multithreading.

Implementation process

1. Define a picture class, which contains the picture path, file name, file id and the function to get these variables.

2. It mainly includes the functions of adding images and getting all images and newly added images.

3. Finally, by adding the picture name to the QTreeView in the QDockWidget component on the left side of the interface,

4. You can view the complete picture by double-clicking, and perform some operations on the picture through events such as scroll wheel and mouse.

Implement environment and UI design

Environment: VS2017 + Qt5.12.4

Implementation

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QListWidget>
#include <QMainWindow>
#include <QTimer>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
 
private slots:
    void on_btnOpen_clicked();
 
    void on_listWidget_itemClicked(QListWidgetItem *item);
 
    void MyFunction();
    void on_pushButton_clicked();
 
    void on_btnLast_clicked();
 
    void on_btnNext_clicked();
 
protected:
    bool eventFilter(QObject *watch, QEvent *evn);
 
    QStringList getFileNames(const QString &path);
private:
    Ui::MainWindow *ui;
 
    QVector<QString> mListPath;
    QTimer mTimer;
    int index ;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
#include <QFileInfoList>
#include <QString>
#include <QDir>
#include <QMessageBox>
#include <QImage>
#include "qevent.h"
#include <QDebug>
#pragma execution_character_set("utf-8")
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    index =0;
    mTimer.setInterval(1000);
    connect(&mTimer,SIGNAL(timeout()),this,SLOT(MyFunction()));
    on_btnOpen_clicked();
    mTimer.start(1000);
    ui->btnOpen->setVisible(false);
   // ui->pushButton->setVisible(false);
    this->installEventFilter(this);
 
    this->setWindowTitle("图片浏览器");
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::MyFunction()
{
    if (index == 5) {
        index = 0;
    } else {
        index++;
    }
    if (index == 5) {
        index = 0;
    }
 
    // this->setStyleSheet(QString("background-image: url(:/%1.png);").arg(index));
     QString strIndex = mListPath.at(index);
 
      qDebug()<<"index "<<QString::number(index)<<"strIndex "<<strIndex;
      QDir filePath(ui->inputDirPath->text());
 
    QString fullName = filePath.absoluteFilePath(strIndex);
    QImage img(fullName);
    QImage thumb = img.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatio);
    ui->label->setPixmap(QPixmap::fromImage(thumb));
}
void MainWindow::on_btnOpen_clicked()
{
 
   QString filePath = QCoreApplication::applicationDirPath()+"/pic";
   ui->inputDirPath->setText(filePath);
  // QMessageBox::information(this,"提示！",filePath);
    QDir dir(filePath);
    // 判断文件夹是否存在
    if(dir.exists()){
        ui->listWidget->clear();
        QFileInfoList info_list = dir.entryInfoList(QDir::Files | QDir::Dirs | QDir::NoDotAndDotDot);
        for(int i =0;i<info_list.count();i++){
            ui->listWidget->addItem(info_list.at(i).fileName());
 
            mListPath.push_back(info_list.at(i).fileName());
        }
 
 
    }
    else{
        QMessageBox::information(this,"提示！","文件夹不存在");
    }
 
}
QStringList MainWindow::getFileNames(const QString &path)
{
    QDir dir(path);
    QStringList nameFilters;
    nameFilters << "*.jpg" << "*.png";
    QStringList files = dir.entryList(nameFilters, QDir::Files|QDir::Readable, QDir::Name);
    return files;
}
void MainWindow::on_listWidget_itemClicked(QListWidgetItem *item)
{
    if(mTimer.isActive())
      mTimer.stop();
    QDir filePath(ui->inputDirPath->text());
 
    QString fullName = filePath.absoluteFilePath(item->text());
    QImage img(fullName);
    QImage thumb = img.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatio);
    ui->label->setPixmap(QPixmap::fromImage(thumb));
 
 
}
//点击事件函数
bool MainWindow::eventFilter(QObject *watch, QEvent *evn)
{
    static int press_x;     //点击鼠标时获取的横坐标x
    static int press_y;     //点击鼠标时获取的纵坐标y
    static int relea_x;     //松开鼠标时获取的横坐标x
    static int relea_y;     //松开鼠标时获取的纵坐标y
 
    QMouseEvent *event = static_cast<QMouseEvent *>(evn);       //将图片QT QEvent 转换为 QMouseEvent ,QKeyEvent....等子类
    //获取点击鼠标（手指）时的坐标
    if (event->type() == QEvent::MouseButtonPress)
    {
            press_x = event->globalX();
            press_y = event->globalY();
    }
    //获取松开鼠标（手指）时的坐标
    if(event->type() == QEvent::MouseButtonRelease)
    {
        relea_x = event->globalX();
        relea_y = event->globalY();
 
 
    }
    //对鼠标（手指）滑动的方向进行判断(右滑)
    if((relea_x - press_x) > 5 && event->type() == QEvent::MouseButtonRelease && qAbs(relea_y - press_y) < 50)
    {
       on_btnNext_clicked();
    }
if( event->type() == QEvent::MouseButtonRelease)
     qDebug()<<"releax "<<QString::number(press_x - relea_x)<<"releay "<<QString::number(relea_y - press_y);
    //对鼠标（手指）滑动的方向进行判断(左滑)
    if((press_x - relea_x) > 5 && event->type() == QEvent::MouseButtonRelease && qAbs(relea_y - press_y) < 50)
    {
       on_btnLast_clicked();
    }
 
    return QWidget::eventFilter(watch, evn);
}
 
 
 
 
void MainWindow::on_pushButton_clicked()
{
    if(ui->pushButton->text()=="滑动切换")
    {
        ui->pushButton->setText("自动播放");
        if(mTimer.isActive())
          mTimer.stop();
    }
    else
    {
        ui->pushButton->setText("滑动切换");
        if(!mTimer.isActive())
          mTimer.start();
    }
}
 
void MainWindow::on_btnLast_clicked()
{
    if(index == -1)
    {
        index = 4;
    }
    else
    {
        index--;
    }
 
    if(index == -1)
    {
        index = 4;
    }
  //  this->setStyleSheet(QString("background-image: url(:/%1.png);").arg(index));
    QString strIndex = mListPath.at(index);
 
     qDebug()<<"index 111"<<QString::number(index)<<"strIndex "<<strIndex;
     QDir filePath(ui->inputDirPath->text());
 
     QString fullName = filePath.absoluteFilePath(strIndex);
    QImage img(fullName);
    QImage thumb = img.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatio);
    ui->label->setPixmap(QPixmap::fromImage(thumb));
}
 
void MainWindow::on_btnNext_clicked()
{
    if (index == 5) {
        index = 0;
    } else {
        index++;
    }
    if (index == 5) {
        index = 0;
    }
 
    // this->setStyleSheet(QString("background-image: url(:/%1.png);").arg(index));        //切换图片
     QString strIndex = mListPath.at(index);
 
      qDebug()<<"index "<<QString::number(index)<<"strIndex "<<strIndex;
      QDir filePath(ui->inputDirPath->text());
 
      QString fullName = filePath.absoluteFilePath(strIndex);
    QImage img(fullName);
    QImage thumb = img.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatio);
    ui->label->setPixmap(QPixmap::fromImage(thumb));
}