Picture browser? QT can also be achieved!

introduction

Windows Everyone has used the image browser , You can view the pictures in the current folder , Turn up 、 Scroll down and play it automatically . In this section ,Jungle Will use Qt To design such a picture browser , Implement the following functions ：

① Browse the folders in the computer , List the pictures in the current folder ;

② Click a picture on the list , The picture will be displayed ;

③ You can control browsing the previous and next pictures of the current picture ;

④ Realize the start and stop control of automatic playback .

In fact, the general idea can be divided into two steps ：

（1） Browse the image file and display it as a list ;

（2） display picture .

01

Realize environment and UI Design

Environmental Science ：vs2008+Qt4.8.6+C++

02

Class design and description

You need to implement the following small steps ：

• lineEdit_currentPath Enter the current folder path （ Such as “C:/”）, stay listWidget The list of image files in the current folder is displayed in order ;
• Click a figure on the list ,label The figure is shown in ;
• Button “ Previous ”“ Next ” Realize picture conversion ;
• Auto play through QTimer Realization , Reasonable timing ;

Therefore, our design classes are as follows ：

#include <QtGui/QWidget>
#include <QDebug>
#include "ui_PictureBrowser.h"
/// Character encoding 
#include <QTextCodec> 
/// Icon 
#include <QIcon>
/// Catalog 
#include <QDir>
/// Timer 
#include <QTimer>
/// picture 
#include <QPixmap>
class PictureBrowser : public QWidget
{
  Q_OBJECT
public:
  PictureBrowser(QWidget *parent = 0, Qt::WFlags flags = 0);
  ~PictureBrowser();
  /// stay QListWidget The details under the current directory are displayed in 
  void showFileInfoList(QFileInfoList pInfoList);
  /// Get the icon according to the nature of the file 
  ///iType=1: Folder 
  ///iType=2: file 
  QIcon *getItemPropertyIcon(int iType);
  /// Show the current picture 
  void showPicture(int num);
public slots:
  /// Display the folders and files in the current directory 
  void showCurrentDirFiles();
  /// Display the files under the folder in the list double clicked by the mouse 
  void showNextDirFiles(QListWidgetItem *item);
  /// Last picture 
  void showLastPicture();
  /// Next picture 
  void showNextPicture();
  /// Auto play 
  void autoPlayPicture();
  /// When the mouse clicks on the list 
  void playCurrentItem(QListWidgetItem* item);
private:
  Ui::PictureBrowserClass ui;
  /// Autoplay timer 
  QTimer *timer;
  /// The path to the current folder 
  QString currentDirPath;
  /// The number of picture files in the current folder 
  int numofPic;
};
#endif // PICTUREBROWSER_H

Copy

Two variables need to be specified ： ①QString currentDirPath： The absolute path to save the current folder , Used to initialize pictures QPixmap; ②int numofPic： This variable counts the total number of pictures in the current folder , Used to operate “ Previous ”“ Next ” Judge whether it is the first picture or the last picture .

03

Browse the image file and display it as a list

The implementation of this part is similar to Jungle In a previous post File browser ？Qt It can also be realized ！ Design and implementation are the same , This article will not be repeated .

The specific change is in the function showFileInfoList（QFileInfoList pInfoList） in ：

void PictureBrowser::showFileInfoList(QFileInfoList pInfoList)
{
  numofPic = 0;
  ui.listWidget->clear();
  for(int i=0;i<pInfoList.size();i++)
  {
    QFileInfo tmpInfo = pInfoList.at(i);
    QString pFileName = tmpInfo.fileName();
    QListWidgetItem *tmpItem = new QListWidgetItem(pFileName);
    if(tmpInfo.isDir())
      tmpItem->setIcon(*getItemPropertyIcon(1));
    else
    {
      tmpItem->setIcon(*getItemPropertyIcon(2));
      /// Get file suffix 
      QString suffix = tmpInfo.suffix();
      /// Select only *.jpg,*.png Format file 
      if(suffix.indexOf("jpg")<0 && suffix.indexOf("png")<0)
        continue;
      else
        numofPic++;
    }
    ui.listWidget->addItem(tmpItem);
  }
}

Copy

The purpose of the modified part is to count the total number of picture files in the current folder , And save to variable numofPic. in addition , stay showCurrentDirFiles() The update variable is also added to the function currentDirPath The operation of ：

void PictureBrowser::showCurrentDirFiles()
{
  // Get the currently entered directory 
  QDir currentDir(ui.lineEdit_currentPath->text());
  QStringList fileList;
  fileList<<"*";
  QFileInfoList infoList = currentDir.entryInfoList(fileList,QDir::AllEntries,QDir::DirsFirst);
  // stay QListWidget A list of documents is displayed in 
  this->showFileInfoList(infoList);

  // Record the current path 
  if(!infoList.isEmpty())
  {
    this->currentDirPath = infoList[0].absoluteFilePath();
    qDebug()<<currentDirPath;
  }
}

Copy

04

Need to be explained Qt class

• QTimer： Timer , adopt setInterval() Function to set the overflow frequency , The unit is millisecond ; Every time the set interval is reached ,QTimer Object will send timeout(） The signal , The user-defined slot function will execute , So as to realize timing control ;
• QPixmap： This article uses this class to load and display pictures , Show it in QLabel On ;
• QListWidget and QListWidgetItem： These two classes are in the last article （《Qt File browser 》） There are , You can also refer to Qt Help document .

05

Realization

#include "PictureBrowser.h"

PictureBrowser::PictureBrowser(QWidget *parent, Qt::WFlags flags)
  : QWidget(parent, flags)
{
  ui.setupUi(this);

  QTextCodec *codec = QTextCodec::codecForName("System");

  QTextCodec::setCodecForTr(codec);

  QTextCodec::setCodecForLocale(codec);
  QTextCodec::setCodecForCStrings(codec);

  currentDirPath = "";
  numofPic = 0;

  /// Initialize the timer 
  timer = new QTimer(this);
  /// Set the playback interval 
  timer->setInterval(1500);///1.5s

  /// File browser slot function 
  connect(ui.lineEdit_currentPath,SIGNAL(returnPressed()),this,SLOT(showCurrentDirFiles()));
  connect(ui.listWidget,SIGNAL(itemDoubleClicked(QListWidgetItem*)),this,SLOT(showNextDirFiles(QListWidgetItem*)));

  /// Display picture slot function 
  connect(ui.pushButton_lastPicture,SIGNAL(clicked()),this,SLOT(showLastPicture()));
  connect(ui.pushButton_nextPicture,SIGNAL(clicked()),this,SLOT(showNextPicture()));
  connect(ui.pushButton_autoPlay,SIGNAL(clicked()),this,SLOT(autoPlayPicture()));
  connect(ui.listWidget,SIGNAL(itemClicked(QListWidgetItem*)),this,SLOT(playCurrentItem(QListWidgetItem*)));

  /// Auto play 
  connect(this->timer,SIGNAL(timeout()),this,SLOT(showNextPicture()));
}
PictureBrowser::~PictureBrowser()
{
}

void PictureBrowser::playCurrentItem(QListWidgetItem* item)
{
  QString strName = item->text();
  if(strName.indexOf("jpg")>=0 || strName.indexOf("png")>=0)
  {
    /// Get the absolute path of the current picture 
    QPixmap pic(currentDirPath+"/"+strName);
    ui.label->setScaledContents(true);
    ui.label->setPixmap(pic);
  }
}

//// Show the last picture 
void PictureBrowser::showLastPicture()
{
  /// Get the index of the current picture in the current folder 
  int currentIndex = ui.listWidget->currentRow();
  
  if(currentIndex!=2)
  {
    /// The current picture is not the first , Then the previous 
    showPicture(currentIndex-1);
    /// Move the mouse to the previous 
    ui.listWidget->setCurrentRow(currentIndex-1);
  }
  else
  {
    /// The current picture is the first , The last one is displayed 
    showPicture(numofPic+1);
    /// Move the mouse to the previous 
    ui.listWidget->setCurrentRow(numofPic+1);
  }
}

//// Show the next picture 
void PictureBrowser::showNextPicture()
{
  /// Get the index of the current picture in the current folder 
  int currentIndex = ui.listWidget->currentRow();

  if(currentIndex!=numofPic+1)
  {
    /// The current picture is not the last , Will display the next 
    showPicture(currentIndex+1);
    /// Move the mouse to the next page 
    ui.listWidget->setCurrentRow(currentIndex+1);
  }
  else
  {
    /// The current picture is the last , Then the first 
    showPicture(2);
    /// Move the mouse to the next page 
    ui.listWidget->setCurrentRow(2);
  }
}

//// display picture 
void PictureBrowser::showPicture(int num)
{
  QListWidgetItem* item = ui.listWidget->item(num);
  QString strName = item->text();

  /// Get the absolute path of the current picture 
  QPixmap pic(currentDirPath+"/"+strName);
  ui.label->setScaledContents(true);
  ui.label->setPixmap(pic);
}

//// Auto play 
void PictureBrowser::autoPlayPicture()
{
  QString str = ui.pushButton_autoPlay->text();
  if(str == " Auto play ")
  {
    this->timer->start();
    showPicture(ui.listWidget->currentRow());
    ui.pushButton_autoPlay->setText(" stop it ");
  }
  else
  {
    this->timer->stop();
    ui.pushButton_autoPlay->setText(" Auto play ");
  }
}

Copy

06

Realization effect

Click next ：

Source code address ：

https://github.com/FengJungle/Qt_Project