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转换成QPixmap
pixmap