如何利用QT制作一个简易的图片查看器

源码地址: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();
}



                
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值