基于Qt實(shí)現(xiàn)圖片播放器的示例代碼

更新時(shí)間：2022年12月16日 09:40:05 作者：音視頻開發(fā)老舅

這篇文章主要為大家詳細(xì)介紹了如何使用qt制作了一個(gè)簡(jiǎn)單的圖片播放器，可以播放gif、png等格式圖片。文中的示例代碼講解詳細(xì)，需要的可以參考一下

前言：使用qt制作了一個(gè)簡(jiǎn)單的圖片播放器，可以播放gif、png等格式圖片

先來(lái)看看播放器的功能（當(dāng)然是很簡(jiǎn)陋的，沒有很深入的設(shè)計(jì)）：

1、點(diǎn)擊圖片列表中圖片進(jìn)行播放。

2、自動(dòng)播放，播放的圖片的間隔時(shí)間可以自己設(shè)定，時(shí)間的單位是秒。

3、自動(dòng)播放的時(shí)候再點(diǎn)擊圖片列表會(huì)停止自動(dòng)播放，保存當(dāng)前播放的圖片的順序，再次點(diǎn)擊自動(dòng)播放的時(shí)候?qū)漠?dāng)前開始。

4、自動(dòng)播放到最后一張圖片的時(shí)候?qū)?huì)停止自動(dòng)播放，再次點(diǎn)擊自動(dòng)播放的時(shí)候?qū)?huì)從第一張圖片開始。

先上圖看看具體功能：

說(shuō)完功能我們聊聊制作思路和使用到的主要代碼：

1、打開有圖片的文件，并獲取文件的路徑

Dir = QFileDialog::getExistingDirectory(this);//獲取文件所在的具體路徑

2、把文件的路徑顯示在指定的窗口

ui->photoPath->setText(Dir);//顯示打開的文件的具體路徑

3、列出文件中的圖片的路徑，建立小圖標(biāo)，并把圖片路徑保存到容器中，方便自動(dòng)播放

//列出目錄下的文件
    for(int i=0;i<fileList.count();i++)
    {
        QFileInfo info = fileList.at(i);
        fileDir.clear();
        fileDir.append(Dir + "/"); 
        QString filename = info.fileName();
        fileDir.append(filename);
        photoPath.append(filename);// 把圖片的路徑保存到容器中
 
        if(info.fileName() == "." || info.fileName() == "..") //跳過(guò)這兩個(gè)目錄
        {
            continue;
        }
        QListWidgetItem *item = new QListWidgetItem(QIcon(fileDir),info.fileName());//建立文件縮小圖標(biāo)
        ui->photoList->addItem(item);//把圖片相對(duì)路徑顯示到窗口中
 
      }

4、單擊圖片列表中的圖片進(jìn)行播放（圖片播放的代碼）

tempDir.clear();
 tempDir.append(Dir+"/");
 QString path = ui->photoList->currentItem()->text();
 tempDir.append(path);    
 ui->photoShow->setScaledContents(true);//顯示圖片的全部
 ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖

5、動(dòng)態(tài)圖播放

//播放動(dòng)態(tài)圖
void MainWindow::showDinamicPhoto(QString path)
{
    QMovie *movie = new QMovie(path);  // path圖片路徑
    movie->start(); //開始播放動(dòng)態(tài)圖
    ui->photoShow->setMovie(movie); //將圖片設(shè)置為為動(dòng)態(tài)
    ui->photoShow->setScaledContents(true); //盡可能完整的播放整張動(dòng)圖 ，此處要設(shè)置為true
}

6、自動(dòng)播放，這里的自動(dòng)播放我使用了定時(shí)器實(shí)現(xiàn)

    else if(checked) //啟動(dòng)定時(shí)器
    {
       delayTime = ui->delayEdit->text();
       mtime->start(delayTime.toInt()*1000);//啟動(dòng)定時(shí)器并設(shè)置播放時(shí)間間隔
       autoFlag = true;
       ui->autoPhoto->setCheckState(Qt::Unchecked);
    }
    else if(!checked)//停止定時(shí)器
    {
        mtime->stop();//停止定時(shí)器
        delayTime.clear();
        autoFlag = false;
    }

7、設(shè)置自動(dòng)播按鈕的狀態(tài)

ui->autoPhoto->setCheckState(Qt::Unchecked); //把按鈕重新置于沒有被選中的狀態(tài)

這里切記要這樣使用，不要用setCheckable()函數(shù)，很容易出錯(cuò)

具體代碼如下：

頭文件mainwindow.h

#ifndef MAINWINDOW_H
 #define MAINWINDOW_H
 
 #include <QMainWindow>
 #include <QFile>
 #include <QDir>
 #include <QTimer>
 #include <QThread>
 namespace Ui {
 class MainWindow;
 }
 
 class MainWindow : public QMainWindow
 {
     Q_OBJECT
 
 public:
     explicit MainWindow(QWidget *parent = 0);
     ~MainWindow();
 
 private slots:
     void on_pathBt_clicked(); //打開目錄
 
     void on_photoList_clicked(const QModelIndex &index);//單擊播放圖片
 
     void on_autoPhoto_clicked(bool checked);//自動(dòng)播放選擇
     void autoPhoto(); //自動(dòng)播放函數(shù)
     void showDinamicPhoto(QString path);//動(dòng)態(tài)圖播放（格式為gif）
 
 private:
     Ui::MainWindow *ui;
     QFile *file;
     QString Dir;//打開文件的路徑
     QString tempDir; //照片的絕地路徑
     QVector<QString> photoPath;//存放照片相對(duì)路徑的容器
     QTimer *mtime; //定時(shí)器
     QString delayTime; //延時(shí)間隔
     bool autoFlag; //判斷是否進(jìn)入的自動(dòng)播放格式
     int num; //照片張數(shù)
 };
 
 #endif // MAINWINDOW_H

源文件mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>
#include <QDebug>
#include <QMessageBox>
#include <QMovie>
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    autoFlag(false),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    num = 0;
 
    delayTime.clear();
    mtime = new QTimer();
 
    //連接自動(dòng)播放槽函數(shù)
    connect(mtime,SIGNAL(timeout()),this,SLOT(autoPhoto()));
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::on_pathBt_clicked()
{
    Dir = QFileDialog::getExistingDirectory(this);//獲取文件所在的具體路徑
    ui->photoPath->setText(Dir);//顯示打開的文件的具體路徑
    QDir dir(Dir);
    QStringList file;
    QFileInfoList fileList = dir.entryInfoList(file,QDir::Files); //獲取目錄下的文件
    QString fileDir; //保存圖片所在的路徑
 
    //列出目錄下的文件
    for(int i=0;i<fileList.count();i++)
    {
        QFileInfo info = fileList.at(i);
        fileDir.clear();
        fileDir.append(Dir + "/");
        QString filename = info.fileName();
        fileDir.append(filename);
        photoPath.append(filename);// 把圖片的路徑裝到容器中
 
        if(info.fileName() == "." || info.fileName() == "..") //跳過(guò)這兩個(gè)目錄
        {
            continue;
        }
        QListWidgetItem *item = new QListWidgetItem(QIcon(fileDir),info.fileName());//建立文件縮小圖標(biāo)
        ui->photoList->addItem(item);//把圖片相對(duì)路徑顯示到窗口中
 
      }
     // qDebug()<<ui->photoList->count();
}
 
 
//單擊圖片列表中的圖片進(jìn)行播放，如果當(dāng)前
void MainWindow::on_photoList_clicked(const QModelIndex &index)
{
 
    //如果選中了自動(dòng)播放的情況下，點(diǎn)擊列表中的內(nèi)容，則停止自動(dòng)播放
    if(autoFlag) //選中自動(dòng)播放的情況
    {
        mtime->stop();
        ui->autoPhoto->setCheckState(Qt::Unchecked);
        autoFlag = false;
    }
 
    num = ui->photoList->row(ui->photoList->currentItem()); //獲取當(dāng)前點(diǎn)擊的內(nèi)容的行號(hào)
 
    //在沒有選中自動(dòng)播放的情況下，判斷當(dāng)前是否點(diǎn)擊了最后一張照片，如果是最后一張照片，在選中自動(dòng)播放的情況下讓它返回到第一張照片
    if(!autoFlag)
    {
        num == ui->photoList->count();
        num = 0;
    }
    tempDir.clear();
    tempDir.append(Dir+"/");
    QString path = ui->photoList->currentItem()->text();
    tempDir.append(path);
 
    //判斷是否是動(dòng)態(tài)圖
    if(tempDir.endsWith(".gif") || tempDir.endsWith(".Gif"))
    {
        showDinamicPhoto(tempDir);
    }
    else
    {
        ui->photoShow->setScaledContents(true);//顯示圖片的全部
        ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖片
    }
 
}
 
 
//自動(dòng)播放照片
void MainWindow::on_autoPhoto_clicked(bool checked)
{
    if(ui->delayEdit->text().isEmpty())
    {
       QMessageBox::warning(this,"提示","請(qǐng)輸入需要間隔的播放時(shí)間（秒）");
       ui->autoPhoto->setCheckState(Qt::Unchecked);
       return;
    }
 
    else if(ui->photoList->count() == 0)
    {
        QMessageBox::warning(this,"警告","還沒有可以播放的圖片");
        ui->autoPhoto->setCheckState(Qt::Unchecked); //把按鈕重新置于沒有被選中的狀態(tài)
        return;
    }
 
    else if(checked) //啟動(dòng)定時(shí)器
    {
       delayTime = ui->delayEdit->text();
       mtime->start(delayTime.toInt()*1000);//啟動(dòng)定時(shí)器并設(shè)置播放時(shí)間間隔
       autoFlag = true;
       //ui->autoPhoto->setCheckState(Qt::Unchecked);
    }
 
    else if(!checked)//停止定時(shí)器
    {
        mtime->stop();//停止定時(shí)器
        delayTime.clear();
        autoFlag = false;
    }
 
}
 
void MainWindow::autoPhoto()
{
        //int tempCount=0;
 
        //tempCount =  photoPath.count();
        tempDir.clear();
        tempDir.append(Dir+"/");
        QString path =  photoPath.at(num); //從容器中找到要播放的照片的相對(duì)路徑
        tempDir.append(path); //拼接照片的絕對(duì)路徑
 
        if(tempDir.endsWith(".gif")  || tempDir.endsWith(".Gif"))
        {
            showDinamicPhoto(tempDir);
            num++;
        }
 
       else if(!(tempDir.endsWith(".gif")  || tempDir.endsWith(".Gif")))
        {
           ui->photoShow->setScaledContents(true);//顯示圖片的全部
           ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖片
 
           //判斷自動(dòng)播放的時(shí)候是否播放到了最后一張圖片，如果是則停止自動(dòng)播放
           if(num ==  (photoPath.count()-1))
           {
               qDebug()<<num;
               mtime->stop();
               num = 0;
               if(autoFlag)
               {
                   autoFlag = false;
               }
               qDebug()<<num;
               ui->autoPhoto->setCheckState(Qt::Unchecked);//把自動(dòng)播放按鈕置于沒有選擇的狀態(tài)
           }
           if(autoFlag)
           {
               num++;
           }
        }
}
 
 
//播放動(dòng)態(tài)圖
void MainWindow::showDinamicPhoto(QString path)
{
    QMovie *movie = new QMovie(path);  // path圖片路徑
    movie->start(); //開始播放動(dòng)態(tài)圖
    ui->photoShow->setMovie(movie); //將圖片設(shè)置為為動(dòng)態(tài)
    ui->photoShow->setScaledContents(true); //盡可能完整的播放整張動(dòng)圖 ，此處要設(shè)置為true
}

界面文件mainwindow.ui

View Code

具體界面如下