一、要實(shí)現(xiàn)的功能

1. 在窗口中可以顯示圖片，并且能夠通過兩個(gè)按鈕進(jìn)行圖片的前進(jìn)和后退的順序切換。
2. 有一個(gè)按鈕，通過這個(gè)按鈕可以從所存圖片資源中隨機(jī)選取一個(gè)圖片進(jìn)行展示
3. 通過按鈕可以控制圖片自動(dòng)輪播順序切換的開始與停止，
4. 顯示當(dāng)前系統(tǒng)的時(shí)間。

二、實(shí)現(xiàn)思路

可以使用標(biāo)簽組件QLabel來顯示圖片，需要主要的是圖片的大小與Qlabel之間大小關(guān)系。圖片顯示載體的問題解決后，再思考圖片資源的讀取途徑，由于圖片的前后切換需要順序的遍歷圖片資源，所以我們可以用順序容器QList 來創(chuàng)建一個(gè)列表對象，將所需的圖片的路徑保存在該列表中，這樣我們在找圖片時(shí)就可以通過 QList 列表的下表的加加減減來進(jìn)行順序選擇對應(yīng)圖片的路徑，同時(shí)也可以隨機(jī)產(chǎn)生一個(gè)列表下表隨機(jī)選擇一張圖片。然后再考慮按鈕點(diǎn)擊和圖片切換功能之間的綁定關(guān)系，很明顯可以使用信號(hào)與槽來實(shí)現(xiàn)，自定義槽函數(shù)，槽函數(shù)中實(shí)現(xiàn)圖片切換的對應(yīng)功能，按鈕觸發(fā)自帶的clicked信號(hào)，按鈕信號(hào)與自定義槽函數(shù)綁定，這樣就可以實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片的效果了。

對于圖片的自動(dòng)切換，可以通過定時(shí)器QTimer 來指定圖片自動(dòng)輪播的間隔時(shí)間，時(shí)間間隔一到就觸發(fā)對應(yīng)的圖片切換槽函數(shù)。

顯示當(dāng)前的系統(tǒng)時(shí)間的話，可以通過QDateTime獲取當(dāng)前系統(tǒng)的時(shí)間，然后使用QLCDNumber組件來顯示。

三、實(shí)現(xiàn)的基本步驟

由于界面不太復(fù)雜，沒有多重界面之間的切換，所以再新建項(xiàng)目工程文件時(shí)，下面的這一界面中的基類選則可以為QDialog，同時(shí)為了方便界面各個(gè)組件的設(shè)計(jì)，可以勾選上下面的“創(chuàng)建界面”選項(xiàng)。

界面布局：

對于圖片資源，為了較好的顯示效果，我都將圖片裁剪成了相同的大小，圖片的添加過程如下：

1. 找到圖片資源，格式要求為jpg、png、bmp，不要選擇過大的圖片（分辨率、文件大小）。
2. 更改圖片名稱，名稱建議為全英文、下劃線和數(shù)字組合，且英文全小寫，數(shù)字不能開頭。
3. 把圖片放置到工作目錄中。
4. 在Qt Creator中選中項(xiàng)目名稱，鼠標(biāo)右鍵，點(diǎn)擊“添加新文件”。
5. 按照下圖所示進(jìn)行操作。
6. 在彈出的窗口中設(shè)置資源文件名稱
7. 在項(xiàng)目管理界面，直接點(diǎn)擊完成?？梢钥吹巾?xiàng)目中多了一個(gè).qrc的資源文件。
8. 選中qrc文件，點(diǎn)擊“添加前綴”。
9. 再次點(diǎn)擊添加里面的添加文件
   在彈出的對話框窗口中選中要添加的圖片文件。添加成功后會(huì)在qrc文件中顯示出來。
10. 點(diǎn)擊Qt Creater左下角的錘子🔨，對項(xiàng)目進(jìn)行構(gòu)建一下，其實(shí)就是編譯一下，這樣資源文件就可以被Designer找到，隨后就可以在 Designer 中設(shè)置圖片了。

創(chuàng)建QList對象，存放圖片路徑：


圖片路徑存放在imglist列表中，可以通過imglist.at(i)來取元素，為了在其他成員函數(shù)中都能夠獲取當(dāng)前顯示的是哪張圖片，需要在Dialog類中設(shè)置一個(gè)用于保存正在顯示的圖片在imglist列表中的下標(biāo)，如下：

定義點(diǎn)擊按鈕切換圖片的槽函數(shù)聲名：

然后編寫顯示上一張的按鈕、顯示下一張的按鈕隨機(jī)顯示圖片的按鈕對應(yīng)的槽函數(shù)：👇

其中要注意的是隨機(jī)數(shù)的產(chǎn)生方法，先使用QDateTime類下的currentMSecsSinceEpoch()成員函數(shù)返回一個(gè)1970-1-1 00:00:00到到現(xiàn)在的毫秒數(shù)的一個(gè)時(shí)間，然后使用這個(gè)時(shí)間作為生成隨機(jī)數(shù)的種子，調(diào)用qrand()產(chǎn)生隨機(jī)數(shù)。

圖片的輪播使用的是QTimer定時(shí)器實(shí)現(xiàn)，通過其成員函數(shù)start()開啟一個(gè)定時(shí)器👇



定時(shí)時(shí)間到后觸發(fā)timeout()信號(hào)，故也用信號(hào)槽來實(shí)現(xiàn)，定時(shí)時(shí)間到后的槽函數(shù)就是切換下一張圖片，和上面的代碼類似👇

對于圖片輪播開始或結(jié)束按鈕的槽函數(shù)👇

對于時(shí)間顯示，也要設(shè)置一個(gè)定時(shí)器來實(shí)現(xiàn)，可以定時(shí)一秒，定時(shí)時(shí)間一到就釋放timeout()的信號(hào)，同時(shí)自定義一個(gè)槽函數(shù)來更新QLCDNumber上面的時(shí)間顯示，對應(yīng)代碼如下：👇

三、運(yùn)行效果圖

四、項(xiàng)目代碼

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_OBJECTpublic:explicit Dialog(QWidget *parent = 0);~Dialog();private:Ui::Dialog *ui;int imgnum; // 圖片序號(hào)bool flag = true; // 輪播按鈕狀態(tài)標(biāo)志QPixmap *pix;   // 建立QPixmap對象QTimer *timer; //設(shè)置定時(shí)器QTimer *flashtimer; // 1秒刷新QList<QString> imglist; // 圖片路徑列表
private slots:void preImgBtnSlot(); // 前一張圖片槽函數(shù)void nextImgBtnSlot(); // 后一張圖片槽函數(shù)void randomImgBtnSlot(); // 隨機(jī)圖片槽函數(shù)void carouseBtnSlot(); // 輪播開始o(jì)r暫停按鈕槽函數(shù)void imgCarouselSlot(); //圖片自動(dòng)輪播槽函數(shù)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); // 設(shè)置2秒定時(shí)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())); // 關(guān)閉窗口connect(flashtimer,SIGNAL(timeout()),this,SLOT(updateTimeSlot()));// 定時(shí)器信號(hào)槽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); // 將圖片設(shè)置到QLbel上ui->label_imgName->setText(QString::number(imgnum+1)); // 圖片序號(hào)顯示
}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的隨機(jī)數(shù)imgnum = rand;//qDebug() << "隨機(jī)圖片" << 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); // 啟動(dòng)定時(shí)器ui->carousePushBtn->setText("停止輪播");}else{timer->stop(); // 停止定時(shí)器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();// 轉(zhuǎn)換為固定格式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();
}