源码地址:https://gitee.com/dxl96/qt_resource/blob/master/picture.rar
最终效果:
这次设计我们结合qt的界面文件进行设计,不只是用纯代码来编写,这样对于初学者来说更直观。
我们首先要导入资源文件,主要是图片资源,用来做图片查看器的背景,主要是美化作用,图片按你自己意愿选择,如下:
界面文件mainwindow.ui如下:
我们可以看到街面上有四个按钮,一个显示区显示图片,同时还有一个绿色的区域。
我这里就讲一下这四个到底是什么,绿色的区域,其实是scrollArea类型的组件,我们可以在这里找到
选择后拖进进MainWindow即可,然后调整大小即可,这个组件的作用是可以在图片太大的时候可以进行拖放
在添加Lable组件,这就是那个浅灰色区域,可以显示图片、文字等,在这里可以找到
然后将Lable组件拖进scrollArea区域中,将鼠标定位在scrollArea上,选择栅格布局,这样浅灰色区域就填充满了scrollArea,开始Lable是无背景的,我们单击右键
选择改变样式表,进入后我们
按图选择颜色即可
四个按钮是Push Button组件,在这里可以找到,拖进去四个即可,
然后分别把它们的对象名称分别改一下,就是下面这样
改成相应的意思,有上一页,下一页,打开文件,退出
在改变每个按钮的文本双击按钮即可,输入与对象名称对应的中文意思即可
然后我们改变整个的背景,同样的我们将鼠标定位在MainWindow上选择改变样式,写成如下形式
其实就是我们在选择添加资源下选择background-image
然后在外部添加一个QMainWindow
这样背景就弄好了
接着我们框住四个按钮选择水平布局
然后将鼠标定位到MainWindow上,选择垂直布局,就完成了所有的界面布局
然后单击右键每个按钮,选择转到槽中选择
即可
在mainwindow.h头文件中代码如下:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QString>
#include <QFileInfoList>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
/**
* @brief on_previousPushButton_clicked 上一张
*/
void on_previousPushButton_clicked();
/**
* @brief on_nextPushButton_clicked 下一张
*/
void on_nextPushButton_clicked();
/**
* @brief on_openPushButton_clicked 打开文件
*/
void on_openPushButton_clicked();
/**
* @brief on_close_clicked 退出
*/
void on_close_clicked();
private:
Ui::MainWindow *ui;
// 当前打开文件路径
QString filePath;
// 已添加的记录
QFileInfoList imgInfoList;
// 当前打开文件在imgInfoList集合中的索引值
int index;
/**
* @brief appendImageFileInfoList 向imgInfoList集合追加图片集合
* @param infoList 需要追加的图片集合
* @param fileinfoL 集合中要排除的图片
*/
void appendImageFileInfoList(QFileInfoList infoList,QFileInfo fileinfoL);
/**
* @brief isConstant imgInfoList集合中是否包含某个文件
* @param fileinfo 需要判断的文件
* @return 是否包含,bool值
*/
bool isConstant(QFileInfo fileinfo);
/**
* @brief getIndexForImgInfoList 获取图片在imgInfoList集合中的索引
* @param fileinfo 需要获取的文件
* @return 该文件索引值
*/
int getIndexForImgInfoList(QFileInfo fileinfo);
};
#endif // MAINWINDOW_H
其实这个头文件中我们是定义了简单的几个变量和方法
QString filePath;
QFileInfoList imgInfoList;
int index;
void appendImageFileInfoList(QFileInfoList infoList,QFileInfo fileinfoL);
bool isConstant(QFileInfo fileinfo);
int getIndexForImgInfoList(QFileInfo fileinfo);
我们将鼠标定位在四个槽函数void前面的位置
void on_previousPushButton_clicked();
void on_nextPushButton_clicked();
void on_openPushButton_clicked();
void on_close_clicked();
分别按住alt+enter,选择在mainwindow.cpp中生成槽函数即可(已经生成不用再生成)
在mainwindow.cpp中代码如下:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtWidgets>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
setWindowTitle("图片查看器");
}
MainWindow::~MainWindow()
{
delete ui;
}
/**
* @brief MainWindow::on_previousPushButton_clicked 上一张
*/
void MainWindow::on_previousPushButton_clicked()
{
index = index - 1;
int count = imgInfoList.count();
qDebug() << "总记录图片数count: " << count << "当前index: " << index;
if (count==0)
{
// 当不存在图片时,提示错误
// 恢复到初始索引
index = index + 1;
qDebug() << "总记录图片数count: " << count << "恢复index: " << index;
QMessageBox::information(this, tr("出错"), tr("打开失败,没有图片记录"));
return;
}
if (index < 0) {
// 如果索引小于0,则跳回设置为最后一张(就是从开头回到最后)
index = count - 1;
qDebug() << "总记录图片数count: " << count << "跳转到末尾index: " << index;
}
filePath.clear();
filePath += imgInfoList.at(index).absoluteFilePath();
qDebug() << "文件名: " << filePath;
QImage image;
if (!image.load(filePath)) {
QMessageBox::information(this, tr("出错"), tr("打开失败,不支持的格式或文件异常"));
return ;
}
QPixmap pixmap = QPixmap::fromImage(image);
ui->imageLabel->setPixmap(pixmap);
ui->imageLabel->resize(pixmap.size());
setWindowTitle(QFileInfo(filePath).fileName());
}
/**
* @brief MainWindow::on_nextPushButton_clicked 下一张
*/
void MainWindow::on_nextPushButton_clicked()
{
index = index + 1;
int count = imgInfoList.count();
qDebug() << "总记录图片数count: " << count << "当前index: " << index;
if (count==0)
{
// 当不存在图片时,提示错误
// 回退索引值
index = index -1;
qDebug() << "总记录图片数count: " << count << "恢复index: " << index;
QMessageBox::information(this, tr("出错"), tr("打开失败,没有图片记录"));
return;
}
if (index >= count)
{
// 如果索引到达末尾,则跳回设置为第一张(就是从最后回到开头)
index = 0;
qDebug() << "总记录图片数count: " << count << "跳转到开头index: " << index;
}
filePath.clear();
filePath += imgInfoList.at(index).absoluteFilePath();
qDebug() << "文件名: " << filePath;
QImage image;
if (!image.load(filePath)) {
QMessageBox::information(this, tr("出错"), tr("打开失败,不支持的格式或文件异常"));
return ;
}
QPixmap pixmap = QPixmap::fromImage(image);
ui->imageLabel->setPixmap(pixmap);
ui->imageLabel->resize(pixmap.size());
setWindowTitle(QFileInfo(filePath).fileName());
}
/**
* @brief MainWindow::appendImageFileInfoList 向imgInfoList集合追加图片集合
* @param infoList 需要追加的图片集合
* @param fileinfoL 集合中要排除的图片
*/
void MainWindow::appendImageFileInfoList(QFileInfoList infoList,QFileInfo fileInfo) {
QFileInfo info;
for (int i = 0; i < infoList.count(); i++) {
info = infoList.at(i);
qDebug() << "同级路录下" << i << ":" <<info.absoluteFilePath();
QString suffix = info.suffix();
if ((suffix == "jpg" || suffix == "bmp" || suffix == "png" || suffix == "gif")
&& fileInfo.absoluteFilePath() != info.absoluteFilePath()) {
imgInfoList.append(info);
qDebug() << "追加图片:" << info.absoluteFilePath();
}
}
}
/**
* @brief MainWindow::isConstant imgInfoList集合中是否包含某个文件
* @param fileinfo 需要判断的文件
* @return 是否包含,bool值
*/
bool MainWindow::isConstant(QFileInfo fileinfo) {
QFileInfo info;
for (int i = 0; i < imgInfoList.count(); i++) {
info = imgInfoList.at(i);
if(fileinfo.absoluteFilePath() == info.absoluteFilePath()) {
qDebug() << "图片记录中包含:" << fileinfo.absoluteFilePath();
return true;
}
}
qDebug() << "图片记录中不包含:" << fileinfo.absoluteFilePath();
return false;
}
/**
* @brief MainWindow::getIndexForImgInfoList 获取图片在imgInfoList集合中的索引
* @param fileinfo 需要获取的文件
* @return 该文件索引值
*/
int MainWindow::getIndexForImgInfoList(QFileInfo fileinfo) {
QFileInfo info;
for (int i = 0; i < imgInfoList.count(); i++) {
info = imgInfoList.at(i);
if(fileinfo.absoluteFilePath() == info.absoluteFilePath()) {
qDebug() << "图片记录索引值:" << i << " | " << fileinfo.absoluteFilePath();
return i;
}
}
qDebug() << "没有获取到索引值:" << fileinfo.absoluteFilePath();
return -1;
}
/**
* @brief MainWindow::on_openPushButton_clicked 打开文件
*/
void MainWindow::on_openPushButton_clicked()
{
filePath = QFileDialog::getOpenFileName(this, tr("选择图片:"),
".", tr("Images (*.png *.bmp *.jpg *.gif)"));
if (filePath.isEmpty()) {
QMessageBox::information(this, tr("错误"), tr("获取文件失败"));
return ;
}
QImage image;
if (!image.load(filePath)) {
QMessageBox::information(this, tr("错误"), tr("打开图片失败"));
return ;
}
QPixmap pixmap = QPixmap::fromImage(image);
QSize imageSize = pixmap.size();
ui->imageLabel->setPixmap(pixmap);
ui->imageLabel->resize(imageSize);
qDebug() << "文件名: " << filePath;
QFileInfo currentFileInfo = QFileInfo(filePath);
setWindowTitle(currentFileInfo.fileName());
QDir dir = currentFileInfo.absoluteDir();
QFileInfoList infoList = dir.entryInfoList(QDir::Files);
qDebug() << "获取文件同级目录图片数:" << infoList.count() << dir;
if(!isConstant(currentFileInfo)) {
imgInfoList.append(currentFileInfo);
qDebug() << "追加图片:" << currentFileInfo.absoluteFilePath();
appendImageFileInfoList(infoList, currentFileInfo);
}
index = getIndexForImgInfoList(currentFileInfo);
}
/**
* @brief on_close_clicked 退出
*/
void MainWindow::on_close_clicked()
{
imgInfoList.clear();
ui->imageLabel->clear();
setWindowTitle("图片查看器");
close();
}