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

这次设计我们结合qt的界面文件进行设计，不只是用纯代码来编写，这样对于初学者来说更直观。

我们首先要导入资源文件，主要是图片资源，用来做图片查看器的背景，主要是美化作用，图片按你自己意愿选择，如下：

界面文件imagedialog.ui如下：

我们可以看到街面上有四个按钮，一个显示区显示图片，同时还有一个灰色的区域。

我这里就讲一下这四个到底是什么，灰色的区域，其实是scrollArea类型的组件，我们可以在这里找到

选择后拖进进imagedialog即可，然后调整大小即可，这个组件的作用是可以在图片太大的时候可以进行拖放

在添加Lable组件，这就是那个黑色区域，可以显示图片、文字等，在这里可以找到

然后将Lable组件拖进scrollArea区域中，将鼠标定位在scrollArea上，选择栅格布局，这样黑色区域就填充满了scrollArea，开始Lable是白色背景的，我们单击右键

选择改变样式表，进入后我们

按图选择黑色即可

四个按钮是Push Button组件，在这里可以找到，拖进去四个即可，

然后分别把它们的对象名称分别改一下，就是下面这样

改成相应的意思，有上一页，下一页，打开文件，退出

在改变每个按钮的文本双击按钮即可，输入与对象名称对应的中文意思即可

然后我们改变整个的背景，同样的我们将鼠标定位在imagedialog上选择改变样式，写成如下形式

其实就是我们在选择添加资源下选择

然后在外部添加一个QDialog

这样背景就弄好了

接着我们框住四个按钮选择水平布局

然后将鼠标定位到imagedialog上，选择垂直布局，就完成了所有的界面布局

然后单击右键每个按钮，选择转到槽中选择

即可

在imagedialog.h头文件中代码如下：

#ifndef IMAGEDIALOG_H
#define IMAGEDIALOG_H

#include <QDialog>
#include <QString>
#include <QFileInfoList>

namespace Ui {
class imageDialog;
}

class imageDialog : public QDialog
{
    Q_OBJECT

public:
    explicit imageDialog(QWidget *parent = 0);
    ~imageDialog();

private slots:
    void on_open_pushButton_clicked();
 
    void on_pushButton_clicked();
 
    void on_under_pushButton_clicked();

    void on_on_pushButton_clicked();

 
private:
    Ui::imageDialog *ui;
    QString filename;
    QFileInfoList imgInfoList;
    int index;
    QString path;
};

 
#endif // IMAGEDIALOG_H

其实这个头文件中我们是定义了简单的几个变量

 QString filename;
 QFileInfoList imgInfoList;
 int index;
 QString path;

我们将鼠标定位在四个槽函数void前面的位置

分别按住alt+enter，选择在imagedialog.cpp中生成槽函数即可

在imagedialog.cpp中代码如下：

#include "imagedialog.h"
#include "ui_imagedialog.h"
#include <QtWidgets>

 
imageDialog::imageDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::imageDialog)
{
    ui->setupUi(this);
 
}

 
imageDialog::~imageDialog()
{
    delete ui;
}

  
void imageDialog::on_open_pushButton_clicked()//打开文件
{
        filename = QFileDialog::getOpenFileName(this, tr("Select image:"),
            ".", tr("Images (*.png *.bmp *.jpg *.gif)"));
        if (filename.isEmpty()) {
            return ;
        }

 
        QImage image;
        if (!image.load(filename)) {
            QMessageBox::information(this, tr("Error"), tr("Open file error"));
            return ;
        }

 
        QPixmap pixmap = QPixmap::fromImage(image);
        //QSize imageSize = pixmap.size();

 
        ui->photo_label->setPixmap(pixmap);
        //ui->photo_label->resize(imageSize);
        //qDebug() << "filname: " << filename;
        setWindowTitle(QFileInfo(filename).fileName());

 
            imgInfoList.clear();
            QDir dir = QFileInfo(filename).absolutePath();
            QFileInfoList infoList = dir.entryInfoList(QDir::Files);
            //qDebug() << "GET:" << infoList.count() << dir;

 
            QFileInfo info;
            for (int i = 0; i < infoList.count(); i++) {
                info = infoList.at(i);
                //qDebug() << i << info.absolutePath();
                QString suffix = info.suffix();

 
                if (suffix == "jpg" || suffix == "bmp" || suffix == "png") {
                    imgInfoList.append(info);
                    //qDebug() << "getImgInfoList:" << i << info.absolutePath() << info.suffix();
                }
            }

 
            QFileInfo curImageInfo = QFileInfo(filename);
            for (int j = 0; j < imgInfoList.count(); j++) {
                info = imgInfoList.at(j);
                if (info.fileName() == curImageInfo.fileName()) {
                    index = j;
                    //qDebug() << "curImage index:" << index;
                }
            }
}

void imageDialog::on_pushButton_clicked()//退出
{
    imgInfoList.clear();
    ui->photo_label->clear();
    setWindowTitle("拍照记录");
    close();
}

 

 
void imageDialog::on_under_pushButton_clicked()//下一页
{
    //getImgInfoList(imgInfoList);

 
        index = index + 1;
        int count = imgInfoList.count();
        //qDebug() << "right count: " << count << "index: " << index;
        if (index == count && count>0)
        {
            index = 0;
        }
        if(index > count && count==0)
        {
            index=0;
            //qDebug() << "count: " << count << "index: " << index;
            return;
        }
        if(index<0)
        {
            index=0;
            return;
        }

 
        filename.clear();
        filename.append(path);
        filename += "/";
        //filename += ".\\photo\\";
        filename += imgInfoList.at(index).fileName();
        //qDebug() << "filname: " << filename;

 
        QImage image;
        if (!image.load(filename)) {
            QMessageBox::information(this, tr("出错"), tr("打开失败，只支持默认文件夹\\photo\\下图片的翻页浏览   请点击退出按钮重新进入查看"));
            return ;
        }

 
        QPixmap pixmap = QPixmap::fromImage(image);
        //imageSize = pixmap.size();

 
        ui->photo_label->setPixmap(pixmap);
        //imageLabel->resize(imageSize);

        setWindowTitle(QFileInfo(filename).fileName());

}

 

 
void imageDialog::on_on_pushButton_clicked()//上一页
{
    index = index - 1;
    int count = imgInfoList.count();
    //qDebug() << "left count: " << count << "index: " << index;
    if (index < 0 && count==0)
    {
        index = 0;
        //qDebug() << " count: " << count << "index: " << index;
        return;
    }
    if (index < 0 && count>0) {
        index = count-1;
        //qDebug() << "count: " << count << "index: " << index;
    }
    if(index >= count)
    {
        index=0;
        return;
    }

 
    filename.clear();
    filename.append(path);

 
 filename += "/";
    // filename += ".\\photo\\";
    filename += imgInfoList.at(index).fileName();
    //qDebug() << "filname: " << filename;

 
    QImage image;
    if (!image.load(filename)) {
        QMessageBox::information(this, tr("出错"), tr("打开失败，只支持默认文件夹\\photo\\下图片的翻页浏览   请点击退出按钮重新进入查看"));
        return ;
    }

 
    QPixmap pixmap = QPixmap::fromImage(image);
    //imageSize = pixmap.size();

 
    ui->photo_label->setPixmap(pixmap);
    //imageLabel->resize(imageSize);

 
    setWindowTitle(QFileInfo(filename).fileName());

 
}

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

猜你喜欢