Qt实现图片浏览器

Qt实践3：图片浏览器

引言

因课程教学，需要利用Qt做图形界面设计（GUI）。自学Qt两月有余，发现现有很多资料，讲述C++程序设计QT项目的较多，不利于新手入门，特别是对于C++编程较弱的学生，上手较难。因此，我将所学的资料，进行归纳整理，总结出一种利用Qt Creator平台的UI设计模式进行Qt项目设计的方法，其中信号与槽函数的编写，也利用槽函数自动连接的方法，大大减少C++代码的编写。该GUI设计方法简捷，易于新手学习。
第一个实践项目是密码登录窗设计，主要讲述 QtCreator的基本操作、对话框Dialog窗体的创建，以及两个窗口的切换显示方法。
第二个实践项目是简易计算器的设计，着重讲述Widget窗体的界面设计与布局方法、槽函数编写方法。
本项目设计着重讲述带有菜单栏、工具栏和铆接组件的MainWindow窗体设计、信号与槽函数自动配置，以及槽函数编程方法。
本实践项目是图片浏览器设计，借鉴于[寒江雪Charles的图片浏览器]，该文章提供的源代码，着重利用C++代码方式编写程序。这里对其进行简化，充分利用QtCreator的UI设计模式，减少编写的代码，便于新手学习。

一、实验目的

熟悉 QtCreator的基本操作，熟练掌握信号与槽在应用程序中的使用。
熟练Qmainwindow窗口设计方法
掌握图片浏览器的Qt设计方法

二、实验内容

学习 Qt 资源系统使用方法。
使用 QtCreator，设计图片浏览器。

三、实现步骤

1. 创建工程
打开 QtCreator，新建项目，进行以下操作：
 选择“Qt Widgets Application”
 项目名称“ImageViewer”，路径“…/QImageViewer”
 选择类“QmainWindow”，名称“ImageViewer”
 并选中“创建界面”

2. 添加资源文件
 将图片文件夹“/images”复制到项目路径“…/QImageViewer”中。（该图片文件夹来自于[[寒江雪Charles的图片浏览器]]，放置了菜单操作图标）
 右击项目名称，选择“Add New”，打开新建文件界面。
 选择模板Qt->Qt Resource File，名称为“Images”，路径选择上步复制的图片文件夹“/images”，默认选择添加到当前项目中。 窗口正下方，点击“添加”，点击“添加前缀”，修改前缀为“/images”.
 再点击“添加”，选择“添加文件”，全部选中当前图片（ctrl+A），完成资源文件的创建。

3.菜单栏设计
菜单栏的构成：标题栏、菜单栏、工具栏、锚接部件、中心部件

双击项目树中的imageviewer.ui文件名，进入设计模式。
1）创建菜单栏和选项
窗口界面上，双击“在这里输入”，可输入菜单栏的名称，回车后进入当前菜单选项设计界面，再双击“在这里输入”，可创建当前菜单下各选项。
这里，创建菜单栏和菜单下选项分别为：
创建菜单栏File，选项有：打开，关闭，退出。（中文不能直接输入，可用复制、黏贴方式输入）。
创建菜单栏operate，选项有：上一张，下一张，左旋，右旋，放大，缩小。
创建菜单栏About，选项有：Qt

2）添加菜单选项的图标
双击下方动作编辑器窗口的“actionopen”，弹出编辑动作窗口，点击图标选项“…”，弹出图片选择窗口，选择合适的图片。（如，add.png）

类似操作，分别给选项：打开，关闭，退出；上一张，下一张，左旋，右旋，放大，缩小；About Qt，都选择合适的图标的图片。

3）添加快捷键
如上，打开编辑动作的窗口，在Shortcut空白处按住键盘组合键，即可输入对应的快捷键。比如，这里按住Ctrl和O键，则设置打开选项的快捷键是Ctrl+O

分别给全部菜单选项添加对应的快捷键。（也可以不添加）
下方的动作编辑器窗口中，修改各菜单选项的名称。最后，如下图所示。

4.工具栏设计
下方的动作编辑器窗口中，选中某图标，直接拖到上方窗口工具栏的空白处即可。

5.功能实现
 信号与槽函数自动创建
下方的动作编辑器窗口中，右击某actionOpen，选择“转到槽”，默认选择“triggered()”信号，自动创建槽函数：void ImageViewer::on_actionOpen_triggered()。该槽函数是空函数，需要编写程序实现动作事件。

相同操作，依次创建其他action的空白槽函数。

 编写各槽函数的功能程序
多个action的槽函数，都要先进行打开图片、读取图片信息的操作，因此这里先进行2个函数的定义
int loadImageResource(void)函数用于打开本地某文件夹中的一个图片；
int getFileInfoList(void)函数用于读取图片信息。
1）打开本地某文件夹中的一个图片。
调用QFileDialog::getOpenFileName函数，提供了打开文件窗口。程序如下：

int ImageViewer::loadImageResource(void)
{//调用标准对话框QFileDialog类，打开一个图片filename = QFileDialog::getOpenFileName(this, tr("Select image:"),"D:\\Documents\\Pictures", tr("Images (*.png *.bmp *.jpg *.gif)"));if (filename.isEmpty()) {return -1 ;}//QImage类封装了对于一般图像像素级的操作，图像显示则使用QPixmap。if (!image.load(filename)) {QMessageBox::information(this, tr("Error"), tr("Open file error")); //错误提示return -1 ;}//QImage转换成QPixmappixmap = QPixmap::fromImage(image);size = pixmap.size();/* get file list */getFileInfoList();return 0;
}

解释：
QFileDialog::getOpenFileName函数的调用格式，自行百度吧，这里调用它，产生一个对话框，其标题为"Select image:"，默认打开路径是 “D:\Documents\Pictures”，只能打开*.png *.bmp *.jpg *.gif格式的图片。选择某图片打开后，该图片名称赋给filename。
image.load(filename)则是根据文件名导入图片像素信息，赋值给变量image
Qimage图片信息需要转换成QPixmap形式，才能显示，调用转换函数：
变量pixmap = QPixmap::fromImage(image);
变量size 用于保存pixmap 的像素长和宽值。
getFileInfoList()函数，是另一个自定义的函数，用于读取打开后的本地图片文件夹目录等信息。

2）读取图片所在文件夹的路径和目录列表信息
自定义的函数：getFileInfoList(void)，程序编写：

int ImageViewer::getFileInfoList(void)
{QFileInfo info;            //定义变量QFileInfoList infoList;path = QFileInfo(filename).absolutePath();  //返回绝对路径dir = QFileInfo(filename).absoluteDir();    //返回目录名称/* clear list */fileInfoList.clear();infoList = dir.entryInfoList(QDir::Files);  //列出dir(path)目录文件下所有文件和目录信息，存储到infoList 容器//进行文件夹递归遍历，将内容存入infoList 容器for (int i = 0; i < infoList.count(); i++) {   //文件数目：fileInfo.count();info = infoList.at(i);                     //文件名称：fileInfo.at(i)QString suffix = info.suffix();                //后缀名if (suffix == "jpg" || suffix == "bmp" || suffix == "png") {fileInfoList.append(info);}}QFileInfo curImageInfo = QFileInfo(filename);for (int j = 0; j <fileInfoList.count(); j++) {info = fileInfoList.at(j);             //进行文件夹递归遍历if (info.fileName() == curImageInfo.fileName()) {index = j;        //记录索引值}}return 0 ;
}

解释：
这里要调用QFileInfo、QFileInfoList类，
path = QFileInfo(filename).absolutePath(); //返回绝对路径
dir = QFileInfo(filename).absoluteDir(); //返回目录名称
infoList = dir.entryInfoList(QDir::Files); //列出dir(path)目录文件下所有文件和目录信息，存储到infoList 容器
.count(); //文件总数
.at(i)； //读取文件名称
fileInfoList.append(info); //fileInfoList文件列表中添加文件名info

3）变量、函数预定义，以及初始化
上面两个函数中使用了多个变量、类及其函数，需要在imageviewer.h头文件预定义，指定库文件。
因此，imageviewer.h头文件中添加库文件引用：

添加变量定义
public:
int index;
int angle; //后面设计左/右旋槽函数时要用到
QSize size;
QString filename;
QString path;
QDir dir;
QFileInfo fileInfo;
QFileInfoList fileInfoList;
QImage image;
QPixmap pixmap;
添加函数定义：
private:
/* init param /
void initImageResource(void); //初始化函数，接下来会讲解，这里一并先预定义
/ open a image /
int loadImageResource(void);
/ get file info list from current path */
int getFileInfoList(void);

各变量，需要在程序设计开始时进行初始化处理，所以编写初始化函数initImageResource(void)为：

void ImageViewer::initImageResource(void)
{index = -1;angle = 0;size = QSize(0, 0);filename.clear();path.clear();
}

void initImageResource(void)初始化函数一般放在ImageViewer::ImageViewer(QWidget *parent) 窗口描述中：
{
ui->setupUi(this);
//初始化
initImageResource();
}

4）action “打开”的槽函数的程序设计

void ImageViewer::on_actionOpen_triggered()
{loadImageResource();    //打开某目录中的图片//Label标签上显示图片ui->imageLabel->setPixmap(pixmap);ui->imageLabel->resize(size);//实现图片自适应大小//设置窗口的标题名称setWindowTitle(QFileInfo(filename).fileName() + tr(" - imageViewer"));
}

解释：
ui->imageLabel是在菜单窗口中间拖放的label标签，用于图片显示。
resize(size)函数是调整图片自适应大小的变化。前面需要引用QSize

5）action “关闭”的槽函数的程序设计

void ImageViewer::on_actionClose_triggered()
{//清除图片显示ui-> imageLabel->clear();//读取资源文件中+号图片image.load(":/images/add.png");pixmap = QPixmap::fromImage(image);size = pixmap.size();ui->imageLabel->setPixmap(pixmap);ui->imageLabel->resize(size);//实现图片自适应大小setWindowTitle(tr("imageViewer"));
}

6）action “退出”的槽函数的程序设计

void ImageViewer::on_actionExit_triggered()
{close();
}

7）action “左旋”的槽函数的程序设计

void ImageViewer::on_actionLeft_triggered()
{//预先加载图片后，已得到image、size等数据，这里直接进行左旋处理QImage imgRotate;     //定义局部变量QMatrix matrix;angle +=3;angle=angle%4;              //取余数matrix.rotate(angle*90);    //得到旋转角度，逆时针旋转imgRotate = image.transformed(matrix);  //尺度变换函数transformed(matrix)pixmap = QPixmap::fromImage(imgRotate); size = pixmap.size();//Label标签上显示图片ui->imageLabel->setPixmap(pixmap);ui->imageLabel->resize(size);//实现图片自适应大小return ;
}

action “右旋”的槽函数，类同，修改angle +=1即可。

8）action “放大”的槽函数的程序设计

void ImageViewer::on_actionEnlarge_triggered()
{//加载图片后，已得到image、size等数据，这里直接进行处理QImage imgScaled;QImage imgRotate;QMatrix matrix;// 调用image.scaled函数，进行尺度变换imgScaled = image.scaled(size.width() *1.2,   //放大倍数1.2size.height() * 1.2,Qt::KeepAspectRatio);/* modify angle */matrix.rotate(angle * 90);    //读取当前旋转角度imgRotate = imgScaled.transformed(matrix);  //变换pixmap = QPixmap::fromImage(imgScaled);   size = pixmap.size();//Label标签上显示图片ui->imageLabel->setPixmap(pixmap);ui->imageLabel->resize(size);//实现图片自适应大小return ;
}

action “缩小”的槽函数，与此类同，修改放大倍数1.2为0.8即可。

9）action “上一张”的槽函数的程序设计

void ImageViewer::on_actionLast_triggered()
{index = index - 1;        //更新索引值，减一int count = fileInfoList.count();    //读取文件个数的统计值//判断是否第一张图片if (index < 0) {QMessageBox::information(this, tr("Tip"), tr("This is the first image."));index = count - 1;}//读取当前路径path下索引值index – 1的文件名filename.clear();filename.append(path);filename += "/";filename += fileInfoList.at(index).fileName();//根据文件名加载图片，否则错误提示if (!image.load(filename)) {  QMessageBox::information(this, tr("Error"), tr("Open file error")); return  ;}//QImage转换成QPixmappixmap = QPixmap::fromImage(image);size = pixmap.size();//Label标签上显示图片ui->imageLabel->setPixmap(pixmap);ui->imageLabel->resize(size);//实现图片自适应大小//标题栏上，添加图片名和- imageViewersetWindowTitle(QFileInfo(filename).fileName() + tr(" - imageViewer"));return;
}

action “下一张”的槽函数，与此类同，修改index = index+1;修改判断语句（是否是最后一张图片）：
if (index == count) {
QMessageBox::information(this, tr(“Tip”), tr(“This is the last image.”));
index = 0;
}

10）action “Qt”的槽函数的程序设计
这里需要构建QDockWidget窗口部件（锚接部件），它是放置在QMindow窗口上的工具窗口，可移动和悬浮。

void ImageViewer::on_actionQt_triggered()
{//构建停靠窗口名AboutMe，指定父类为this主窗口QDockWidget *AboutMe = new QDockWidget(tr("About Qt"),this);    AboutMe->setWindowTitle(tr("About Me"));
//设置停靠窗口特性，可移动，可关闭，可漂浮AboutMe->setFeatures(QDockWidget::AllDockWidgetFeatures);
//设置窗口停靠位置AboutMe->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
//构建显示文本myInfoQTextEdit *myInfo = new QTextEdit(tr("<br>Welcom</br><br>blog address:https://blog.csdn.net/leyan118</br>"));//构建显示文本myInfo为锚接部件
AboutMe->setWidget(myInfo);addDockWidget(Qt::RightDockWidgetArea, AboutMe);  //右侧显示
}

使用QDockWidget以及QTextEdit，需要在imageviewer.h头文件中引入库文件QTextEdit、QDockWidget。

功能自行扩展：

自动播放。（提示，需要使用定时器）
其他功能扩展：图像扭曲，或图像处理（灰度变换等）

源码下载