Qt实践3： 图片浏览器

Qt实现图片浏览器

Qt实践3： 图片浏览器

引言

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

一、 实验目的

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

二、 实验内容

1. 学习 Qt 资源系统使用方法。
2. 使用 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