Qt实现一个电子相册

一、要实现的功能

1. 在窗口中可以显示图片，并且能够通过两个按钮进行图片的前进和后退的顺序切换。
2. 有一个按钮，通过这个按钮可以从所存图片资源中随机选取一个图片进行展示
3. 通过按钮可以控制图片自动轮播顺序切换的开始与停止，
4. 显示当前系统的时间。

二、实现思路

可以使用标签组件QLabel来显示图片，需要主要的是图片的大小与Qlabel之间大小关系。图片显示载体的问题解决后，再思考图片资源的读取途径，由于图片的前后切换需要顺序的遍历图片资源，所以我们可以用顺序容器QList 来创建一个列表对象，将所需的图片的路径保存在该列表中，这样我们在找图片时就可以通过 QList 列表的下表的加加减减来进行顺序选择对应图片的路径，同时也可以随机产生一个列表下表随机选择一张图片。然后再考虑按钮点击和图片切换功能之间的绑定关系，很明显可以使用信号与槽来实现，自定义槽函数，槽函数中实现图片切换的对应功能，按钮触发自带的clicked信号，按钮信号与自定义槽函数绑定，这样就可以实现点击按钮切换图片的效果了。

对于图片的自动切换，可以通过定时器QTimer 来指定图片自动轮播的间隔时间，时间间隔一到就触发对应的图片切换槽函数。

显示当前的系统时间的话，可以通过QDateTime获取当前系统的时间，然后使用QLCDNumber组件来显示。

三、实现的基本步骤

由于界面不太复杂，没有多重界面之间的切换，所以再新建项目工程文件时，下面的这一界面中的基类选则可以为QDialog，同时为了方便界面各个组件的设计，可以勾选上下面的“创建界面”选项。

界面布局：

对于图片资源，为了较好的显示效果，我都将图片裁剪成了相同的大小，图片的添加过程如下：

1. 找到图片资源，格式要求为jpg、png、bmp，不要选择过大的图片（分辨率、文件大小）。
2. 更改图片名称，名称建议为全英文、下划线和数字组合，且英文全小写，数字不能开头。
3. 把图片放置到工作目录中。
4. 在Qt Creator中选中项目名称，鼠标右键，点击“添加新文件”。
5. 按照下图所示进行操作。
6. 在弹出的窗口中设置资源文件名称
7. 在项目管理界面，直接点击完成。可以看到项目中多了一个.qrc的资源文件。
8. 选中qrc文件，点击“添加前缀”。
9. 再次点击添加里面的添加文件
   在弹出的对话框窗口中选中要添加的图片文件。添加成功后会在qrc文件中显示出来。
10. 点击Qt Creater左下角的锤子🔨，对项目进行构建一下，其实就是编译一下，这样资源文件就可以被Designer找到，随后就可以在 Designer 中设置图片了。

创建QList对象，存放图片路径：

图片路径存放在imglist列表中，可以通过imglist.at(i)来取元素，为了在其他成员函数中都能够获取当前显示的是哪张图片，需要在Dialog类中设置一个用于保存正在显示的图片在imglist列表中的下标，如下：

定义点击按钮切换图片的槽函数声名：

然后编写显示上一张的按钮、显示下一张的按钮随机显示图片的按钮对应的槽函数：👇

其中要注意的是随机数的产生方法，先使用QDateTime类下的currentMSecsSinceEpoch()成员函数返回一个1970-1-1 00:00:00到到现在的毫秒数的一个时间，然后使用这个时间作为生成随机数的种子，调用qrand()产生随机数。图片的轮播使用的是QTimer定时器实现，通过其成员函数start()开启一个定时器👇

定时时间到后触发timeout()信号，故也用信号槽来实现，定时时间到后的槽函数就是切换下一张图片，和上面的代码类似👇

对于图片轮播开始或结束按钮的槽函数👇

对于时间显示，也要设置一个定时器来实现，可以定时一秒，定时时间一到就释放timeout()的信号，同时自定义一个槽函数来更新QLCDNumber上面的时间显示，对应代码如下：👇

三、运行效果图

四、项目代码

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>
#include <QString>
#include <QDateTime>
#include <QList>
#include <QTimer>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;
    int imgnum; // 图片序号
    bool flag = true; // 轮播按钮状态标志
    QPixmap *pix;   // 建立QPixmap对象
    QTimer *timer; //设置定时器
    QTimer *flashtimer; // 1秒刷新
    QList<QString> imglist; // 图片路径列表
private slots:
    void preImgBtnSlot(); // 前一张图片槽函数
    void nextImgBtnSlot(); // 后一张图片槽函数
    void randomImgBtnSlot(); // 随机图片槽函数
    void carouseBtnSlot(); // 轮播开始or暂停按钮槽函数
    void imgCarouselSlot(); //图片自动轮播槽函数
    void updateTimeSlot();
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog),imgnum(0)
{
    ui->setupUi(this);

    pix = new QPixmap;
    timer = new QTimer;
    flashtimer = new QTimer;
    timer->start(2000); // 设置2秒定时
    flashtimer->start(1000);

    QString imgpath1 = ":/new/prefix1/image/img1.jpg";
    QString imgpath2 = ":/new/prefix1/image/img2.jpg";
    QString imgpath3 = ":/new/prefix1/image/img3.jpg";
    QString imgpath4 = ":/new/prefix1/image/img4.jpg";
    QString imgpath5 = ":/new/prefix1/image/img5.jpg";

    imglist <<imgpath1 <<imgpath2 <<imgpath3 <<imgpath4 <<imgpath5;

    connect(ui->prePushBtn,SIGNAL(clicked()),this,SLOT(preImgBtnSlot()));
    connect(ui->nextPushBtn,SIGNAL(clicked()),this,SLOT(nextImgBtnSlot()));
    connect(ui->randomPushBtn,SIGNAL(clicked()),this,SLOT(randomImgBtnSlot()));
    connect(ui->carousePushBtn,SIGNAL(clicked()),this,SLOT(carouseBtnSlot()));
    connect(ui->pushButtonClose,SIGNAL(clicked()),this,SLOT(close())); // 关闭窗口
    connect(flashtimer,SIGNAL(timeout()),this,SLOT(updateTimeSlot()));

    // 定时器信号槽
    connect(timer,SIGNAL(timeout()),this,SLOT(imgCarouselSlot()));

    //    for(int i=0; i<imglist.size(); i++)
    //    {
    //        QString str = imglist.at(i);
    //        qDebug() <<str;
    //    }
}

Dialog::~Dialog()
{
    delete ui;
    delete pix;
    delete timer;
}

void Dialog::preImgBtnSlot()
{
    imgnum = (imgnum + 5 - 1) % 5;
    //qDebug() << "图片" << imgnum;
    pix->load(imglist.at(imgnum)); // 加载imglist中的前一张图片
    ui->label->setPixmap(*pix); // 将图片设置到QLbel上
    ui->label_imgName->setText(QString::number(imgnum+1)); // 图片序号显示
}

void Dialog::nextImgBtnSlot()
{
    imgnum = (imgnum + 1) % 5;
    //qDebug() << "图片" << imgnum;
    pix->load(imglist.at(imgnum));
    ui->label->setPixmap(*pix);
    ui->label_imgName->setText(QString::number(imgnum+1));
}

void Dialog::randomImgBtnSlot()
{
    qint64 time = QDateTime::currentMSecsSinceEpoch();
    qsrand(time);
    int rand = qrand()%5; // 生成0-4的随机数

    imgnum = rand;
    //qDebug() << "随机图片" << imgnum;
    pix->load(imglist.at(imgnum));
    ui->label->setPixmap(*pix);
    ui->label_imgName->setText(QString::number(imgnum+1));
}

void Dialog::carouseBtnSlot()
{
    flag = !flag;
    if(flag)
    {
        timer->start(2000); // 启动定时器
        ui->carousePushBtn->setText("停止轮播");
    }
    else
    {
        timer->stop(); // 停止定时器
        ui->carousePushBtn->setText("开始轮播");
    }
}

void Dialog::imgCarouselSlot()
{
    imgnum = (imgnum + 1) % 5;
    pix->load(imglist.at(imgnum));
    ui->label->setPixmap(*pix);
    ui->label_imgName->setText(QString::number(imgnum+1));
}

void Dialog::updateTimeSlot()
{
    QDateTime now = QDateTime::currentDateTime();
    // 转换为固定格式
    QString time_text = now.toString("yyyy-MM-dd hh:mm:ss");
    //qDebug() << text; // "2023-10-20 16:00:44"
    ui->lcdDate->display(time_text);
}

main.cpp

#include "dialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}