文章目录

• 前置文章与导航索引
• 前言
• 布局调整
• 显示上下一张图片的代码实现
• 切换上下张
• 修改错误

前置文章与导航索引

导航索引帖
前置文章，课设第一篇

前言

上一章我们完成了选择图片并打开，细心的同学在做这一部分时候会发现，我们制作了一个多选图片并打开第一张图片显示的功能，但在多选时，我们打开图片将会因为图片命名原因，可能无法准确打开自己想要的图片，本章将开展打开多张图片并相互切换的功能开发。

布局调整

这里我们添加了两个label用于显示上一张&下一张，并且做了两个切换按钮，这里暂时我们先不做美化了。

显示上下一张图片的代码实现

思路：其实很简单，因为读入时默认为第一张，所以只需要在BeforeLabel里放入最后一张，AfterLabel里放入第二张就行。
这里用的方法count方法获取总数，由于第一个是0，最后一个则是count（）-1，后一张就不用多赘述了。

void MainWindow::on_ChPicBtn_clicked()
{
    //打开图片文件，选择图片
    QStringList srcDirPathListS = QFileDialog::getOpenFileNames(this, tr("选择图片"),
                                                                QDir::homePath(), tr("图像文件(*.jpg *.png *.bmp)"));
    qDebug()<<"图片路径"<<srcDirPathListS; //在控制台输出路径观察
    srcDirPathList = srcDirPathListS;//持久化图片

    imagenum =0;
    QImage image=QImage(srcDirPathList.at(imagenum));//初始化选中第一张图片
    qDebug()<<"image:"<<image;
    if(!image.isNull())
    {
        ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));
        ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(srcDirPathList.count()-1)),ui->BeforeLabel)));
        ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum+1)),ui->AfterLabel)));
    }
    else
    {

         return;
    }
}

这里代码难度不大，但我为了后续操作能共用这个读取到的List，在头文件中建了一个List来存储，同时用imagenum来记录当前image是第几张。所以，别忘了在头文件中添加代码。

//mainwindow.h
    int imagenum;
    QStringList srcDirPathList;

到此，显示前后一张图片的功能已经完成了。

切换上下张

原理：做到这里，切换上下张的功能已经很简单了，只需要将imagenum数字加减，再重新显示图片就行了。

void MainWindow::on_BeforeBtn_clicked()
{
    //切换imagenum为上一张
    if (imagenum=0){
        imagenum=srcDirPathList.count()-1;
    }
    else {
        imagenum=imagenum+1;
    }
    ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));
    ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum-1)),ui->BeforeLabel)));
    ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum+1)),ui->AfterLabel)));
}

这个功能非常简单明了了吧。
但写到这里，会发现有个问题，我们在显示当前图片这个环节，代码重复度有点高了。为了避免后续修改压力大以及代码不美观，我们这里将显示图片整合为单独的方法。

void MainWindow::ImageShow(int imagenum)
{
    if(imagenum==0)
    {
    ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));
    ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(srcDirPathList.count()-1)),ui->BeforeLabel)));
    ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum+1)),ui->AfterLabel)));
    }
    else if(imagenum==(srcDirPathList.count()-1))
    {
       ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));
       ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum-1)),ui->BeforeLabel)));
       ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(0)),ui->AfterLabel)));
    }
    else
    {
        ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));
        ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum-1)),ui->BeforeLabel)));
        ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum+1)),ui->AfterLabel)));
    }
}

这边分类讨论了当前图片为第一张、最后一张、其他情况，小伙伴们应该都能看懂，就不多赘述了。

修改错误

至此，切换上下张功能也完成了。
但做过测试的小伙伴们会发现，如果没选中图片就点击上下张会报错&选择图片后未选中退出会报错，这里来处理一下这个问题。

首先是对于打开图片这边的调整：

void MainWindow::on_ChPicBtn_clicked()
{
    //打开图片文件，选择图片
    QStringList srcDirPathListS = QFileDialog::getOpenFileNames(this, tr("选择图片"),
                                                                QDir::homePath(), tr("图像文件(*.jpg *.png *.bmp)"));
    qDebug()<<"图片路径"<<srcDirPathListS; //在控制台输出路径观察
    srcDirPathList = srcDirPathListS;//持久化图片
    if(!srcDirPathList.isEmpty())
    {
        imagenum =0;
        QImage image=QImage(srcDirPathList.at(imagenum));//初始化选中第一张图片
        qDebug()<<"image:"<<image;
       ImageShow(imagenum);
    }
    else if(srcDirPathList.isEmpty())
    {

         return;
    }
}

这里将逻辑顺序更改了，当我们读取到图片后，srcDirPathList才会有数值。srcDirPathList不为空才能初始化图片，这样就不会数据溢出造成程序异常了。

再是对上下一张的处理。

void MainWindow::ImageShow(int imagenum)
{

    ui->piclabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum)),ui->piclabel)));

    if(imagenum-1<0)
    {
    ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(srcDirPathList.count()-1)),ui->BeforeLabel)));
    }
    else
    {
     ui->BeforeLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum-1)),ui->BeforeLabel)));
    }

    if(imagenum+1 >= srcDirPathList.count())
    {
     ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(0)),ui->BeforeLabel)));
    }
    else {
      ui->AfterLabel->setPixmap(QPixmap::fromImage(ImageSetSize(QImage(srcDirPathList.at(imagenum+1)),ui->BeforeLabel)));
    }
}

当我们没打开图片就点击上下一张时，程序将提示我们先选择图片，并return回点击前的状态，就不会因为没选择就点击而程序异常了。