图片浏览器？Qt也可以实现！

引言

Windows的图片浏览器大家都用过，可以查看当前文件夹下的图片，往上翻、往下翻并且自动播放。在这一节里，Jungle将用Qt来设计这么一个图片浏览器，实现以下功能：

①浏览电脑里的文件夹，将当前文件夹下的图片列表罗列出来；

②鼠标点击列表上的某一张图片，图片将显示出来；

③可以控制浏览当前图片的上一张和下一张；

④实现自动播放的开始和停止控制。

其实总的思路可以分为两步走：

（1）浏览图片文件并显示为列表；

（2）显示图片。

01

实现环境和UI设计

环境：vs2008+Qt4.8.6+C++

02

类的设计和说明

具体需要实现以下小步骤：

• lineEdit_currentPath里输入当前文件夹路径（如“C:/”），在listWidget里按序显示当前文件夹下的图片文件列表；
• 鼠标点击列表上某张图，label里显示该图；
• 按钮“上一张”“下一张”实现图片转换；
• 自动播放通过QTimer实现，合理定时；

因此我们设计类如下：

#include <QtGui/QWidget>
#include <QDebug>
#include "ui_PictureBrowser.h"
///字符编码
#include <QTextCodec> 
///图标
#include <QIcon>
///目录
#include <QDir>
///定时器
#include <QTimer>
///图片
#include <QPixmap>
class PictureBrowser : public QWidget
{
  Q_OBJECT
public:
  PictureBrowser(QWidget *parent = 0, Qt::WFlags flags = 0);
  ~PictureBrowser();
  ///在QListWidget里显示当前目录下的明细
  void showFileInfoList(QFileInfoList pInfoList);
  ///根据文件性质获取图标
  ///iType=1:文件夹
  ///iType=2:文件
  QIcon *getItemPropertyIcon(int iType);
  ///显示当前图片
  void showPicture(int num);
public slots:
  ///显示当前目录下的文件夹和文件
  void showCurrentDirFiles();
  ///显示鼠标双击的列表里的文件夹下的文件
  void showNextDirFiles(QListWidgetItem *item);
  ///上一张图片
  void showLastPicture();
  ///下一张图片
  void showNextPicture();
  ///自动播放
  void autoPlayPicture();
  ///鼠标点击列表时显示
  void playCurrentItem(QListWidgetItem* item);
private:
  Ui::PictureBrowserClass ui;
  ///自动播放定时器
  QTimer *timer;
  ///当前文件夹的路径
  QString currentDirPath;
  ///当前文件夹里的图片文件数量
  int numofPic;
};
#endif // PICTUREBROWSER_H

复制

需要说明两个变量： ①QString currentDirPath：这个保存当前文件夹的绝对路径，用于初始化图片QPixmap； ②int numofPic：该变量统计当前文件夹下的图片总数量，用于操作“上一张”“下一张”时判断是否是第一张图或者最后一张图。

03

浏览图片文件并显示为列表

这部分的实现与Jungle在之前的一篇文章文件浏览器？Qt也可以实现！设计和实现思路路一样，本文不再赘述。

具体作改变的在函数showFileInfoList（QFileInfoList pInfoList）里：

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));
      ///获取文件后缀名
      QString suffix = tmpInfo.suffix();
      ///只选取*.jpg,*.png格式文件
      if(suffix.indexOf("jpg")<0 && suffix.indexOf("png")<0)
        continue;
      else
        numofPic++;
    }
    ui.listWidget->addItem(tmpItem);
  }
}

复制

改动部分的目的是为了统计当前文件夹里图片文件的总数，并保存至变量numofPic。另外，在showCurrentDirFiles()函数里同样增加了更新变量currentDirPath的操作：

void PictureBrowser::showCurrentDirFiles()
{
  //获取当前输入的目录
  QDir currentDir(ui.lineEdit_currentPath->text());
  QStringList fileList;
  fileList<<"*";
  QFileInfoList infoList = currentDir.entryInfoList(fileList,QDir::AllEntries,QDir::DirsFirst);
  //在QListWidget里显示文件列表
  this->showFileInfoList(infoList);

  //记录当前路径
  if(!infoList.isEmpty())
  {
    this->currentDirPath = infoList[0].absoluteFilePath();
    qDebug()<<currentDirPath;
  }
}

复制

04

需要说明的Qt类

• QTimer：定时器，通过setInterval()函数设置溢出频率，单位为毫秒;每达到设定的间隔，QTimer对象会发送timeout(）信号，通过用户定义的槽函数则会执行，以此来实现定时控制；
• QPixmap：本文通过此类来实现加载和显示图片，将其显示在QLabel上；
• QListWidget和QListWidgetItem：这两个类在上一篇文章（《Qt文件浏览器》）里介绍有，大家也可以查阅Qt帮助文档。

05

实现

#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;

  ///初始化定时器
  timer = new QTimer(this);
  ///设定播放时间间隔
  timer->setInterval(1500);///1.5s

  ///文件浏览器槽函数
  connect(ui.lineEdit_currentPath,SIGNAL(returnPressed()),this,SLOT(showCurrentDirFiles()));
  connect(ui.listWidget,SIGNAL(itemDoubleClicked(QListWidgetItem*)),this,SLOT(showNextDirFiles(QListWidgetItem*)));

  ///显示图片槽函数
  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*)));

  ///自动播放
  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)
  {
    ///获取当前图片的绝对路径
    QPixmap pic(currentDirPath+"/"+strName);
    ui.label->setScaledContents(true);
    ui.label->setPixmap(pic);
  }
}

////显示上一张图片
void PictureBrowser::showLastPicture()
{
  ///获取当前图片在当前文件夹中的索引
  int currentIndex = ui.listWidget->currentRow();
  
  if(currentIndex!=2)
  {
    ///当前图片不是第一张,则显示上一张
    showPicture(currentIndex-1);
    ///鼠标移动至上一张
    ui.listWidget->setCurrentRow(currentIndex-1);
  }
  else
  {
    ///当前图片是第一张，则显示最后一张
    showPicture(numofPic+1);
    ///鼠标移动至上一张
    ui.listWidget->setCurrentRow(numofPic+1);
  }
}

////显示下一张图片
void PictureBrowser::showNextPicture()
{
  ///获取当前图片在当前文件夹中的索引
  int currentIndex = ui.listWidget->currentRow();

  if(currentIndex!=numofPic+1)
  {
    ///当前图片不是最后一张，则显示下一张
    showPicture(currentIndex+1);
    ///鼠标移动至下一张
    ui.listWidget->setCurrentRow(currentIndex+1);
  }
  else
  {
    ///当前图片是最后一张，则显示第一张
    showPicture(2);
    ///鼠标移动至下一张
    ui.listWidget->setCurrentRow(2);
  }
}

////显示图片
void PictureBrowser::showPicture(int num)
{
  QListWidgetItem* item = ui.listWidget->item(num);
  QString strName = item->text();

  ///获取当前图片的绝对路径
  QPixmap pic(currentDirPath+"/"+strName);
  ui.label->setScaledContents(true);
  ui.label->setPixmap(pic);
}

////自动播放
void PictureBrowser::autoPlayPicture()
{
  QString str = ui.pushButton_autoPlay->text();
  if(str == "自动播放")
  {
    this->timer->start();
    showPicture(ui.listWidget->currentRow());
    ui.pushButton_autoPlay->setText("停止");
  }
  else
  {
    this->timer->stop();
    ui.pushButton_autoPlay->setText("自动播放");
  }
}

复制

06

实现效果

点击下一张后：

源码地址：

https://github.com/FengJungle/Qt_Project