Qt图片浏览器

Windows的图片浏览器大家都用过，可以查看当前文件夹下的图片，往上翻、往下翻并且自动播放。在这一节里，Jungle将用Qt来设计这么一个图片浏览器，实现以下功能：
①浏览电脑里的文件夹，将当前文件夹下的图片列表罗列出来；
②鼠标点击列表上的某一张图片，图片将显示出来；
③可以控制浏览当前图片的上一张和下一张；
④实现自动播放的开始和停止控制。
其实总的思路可以分为两步走：
（1）浏览图片文件并显示为列表；
（2）显示图片。

1.实现环境

vs2008+Qt4.8.6+C++

2.UI设计

3.类的设计和说明

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

• 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：该变量统计当前文件夹下的图片总数量，用于操作“上一张”“下一张”时判断是否是第一张图或者最后一张图。

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

这部分的实现与Jungle在之前的一篇文章《Qt文件浏览器》（https://blog.csdn.net/sinat_21107433/article/details/80143750）设计和实现思路路一样，本文不再赘述。
具体作改变的在函数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;
	}
}

5.需要说明的Qt类

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

6.实现

#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()
{
}

这里说明一点QTextCodec，加载字符编码，这个Jungle在之后的文章里再详细介绍。

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("自动播放");
	}
}

7.实现效果

点击“下一张”后：

这里Jungle愚钝，不知道如何在博客是上传视频。不过没关系，Jungle已将源码上传至CSDN下载资料里了，大家可以去看看，同时在Jungle的知乎专栏也有视频https://zhuanlan.zhihu.com/p/36476290！

---

欢迎关注知乎专栏：Jungle是一个用Qt的工业Robot
欢迎关注Jungle的微信公众号：Jungle笔记