QT制作一個圖片播放器

本文轉載自查看原文 2017-12-18 15:23 2995 QT

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

先來看看播放器的功能（當然是很簡陋的，沒有很深入的設計）：

1、點擊圖片列表中圖片進行播放。

2、自動播放，播放的圖片的間隔時間可以自己設定，時間的單位是秒。

3、自動播放的時候再點擊圖片列表會停止自動播放，保存當前播放的圖片的順序，再次點擊自動播放的時候將從當前開始。

4、自動播放到最后一張圖片的時候將會停止自動播放，再次點擊自動播放的時候將會從第一張圖片開始。

先上圖看看具體功能：

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

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

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

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

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

3、列出文件中的圖片的路徑，建立小圖標，並把圖片路徑保存到容器中，方便自動播放

//列出目錄下的文件
    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() == "..") //跳過這兩個目錄
        {
            continue;
        }
        QListWidgetItem *item = new QListWidgetItem(QIcon(fileDir),info.fileName());//建立文件縮小圖標
        ui->photoList->addItem(item);//把圖片相對路徑顯示到窗口中

      }

4、單擊圖片列表中的圖片進行播放（圖片播放的代碼）

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

5、動態圖播放

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

6、自動播放，這里的自動播放我使用了定時器實現

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

7、設置自動播按鈕的狀態

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

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

具體代碼如下：

頭文件mainwindow.h

 1 #ifndef MAINWINDOW_H
 2 #define MAINWINDOW_H
 3 
 4 #include <QMainWindow>
 5 #include <QFile>
 6 #include <QDir>
 7 #include <QTimer>
 8 #include <QThread>
 9 namespace Ui {
10 class MainWindow;
11 }
12 
13 class MainWindow : public QMainWindow
14 {
15     Q_OBJECT
16 
17 public:
18     explicit MainWindow(QWidget *parent = 0);
19     ~MainWindow();
20 
21 private slots:
22     void on_pathBt_clicked(); //打開目錄
23 
24     void on_photoList_clicked(const QModelIndex &index);//單擊播放圖片
25 
26     void on_autoPhoto_clicked(bool checked);//自動播放選擇
27     void autoPhoto(); //自動播放函數
28     void showDinamicPhoto(QString path);//動態圖播放（格式為gif）
29 
30 private:
31     Ui::MainWindow *ui;
32     QFile *file;
33     QString Dir;//打開文件的路徑
34     QString tempDir; //照片的絕地路徑
35     QVector<QString> photoPath;//存放照片相對路徑的容器
36     QTimer *mtime; //定時器
37     QString delayTime; //延時間隔
38     bool autoFlag; //判斷是否進入的自動播放格式
39     int num; //照片張數
40 };
41 
42 #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();

    //連接自動播放槽函數
    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() == "..") //跳過這兩個目錄
        {
            continue;
        }
        QListWidgetItem *item = new QListWidgetItem(QIcon(fileDir),info.fileName());//建立文件縮小圖標
        ui->photoList->addItem(item);//把圖片相對路徑顯示到窗口中

      }
     // qDebug()<<ui->photoList->count();
}


//單擊圖片列表中的圖片進行播放，如果當前
void MainWindow::on_photoList_clicked(const QModelIndex &index)
{

    //如果選中了自動播放的情況下，點擊列表中的內容，則停止自動播放
    if(autoFlag) //選中自動播放的情況
    {
        mtime->stop();
        ui->autoPhoto->setCheckState(Qt::Unchecked);
        autoFlag = false;
    }

    num = ui->photoList->row(ui->photoList->currentItem()); //獲取當前點擊的內容的行號

    //在沒有選中自動播放的情況下，判斷當前是否點擊了最后一張照片，如果是最后一張照片，在選中自動播放的情況下讓它返回到第一張照片
    if(!autoFlag)
    {
        num == ui->photoList->count();
        num = 0;
    }
    tempDir.clear();
    tempDir.append(Dir+"/");
    QString path = ui->photoList->currentItem()->text();
    tempDir.append(path);

    //判斷是否是動態圖
    if(tempDir.endsWith(".gif") || tempDir.endsWith(".Gif"))
    {
        showDinamicPhoto(tempDir);
    }
    else
    {
        ui->photoShow->setScaledContents(true);//顯示圖片的全部
        ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖片
    }

}


//自動播放照片
void MainWindow::on_autoPhoto_clicked(bool checked)
{
    if(ui->delayEdit->text().isEmpty())
    {
       QMessageBox::warning(this,"提示","請輸入需要間隔的播放時間（秒）");
       ui->autoPhoto->setCheckState(Qt::Unchecked);
       return;
    }

    else if(ui->photoList->count() == 0)
    {
        QMessageBox::warning(this,"警告","還沒有可以播放的圖片");
        ui->autoPhoto->setCheckState(Qt::Unchecked); //把按鈕重新置於沒有被選中的狀態
        return;
    }

    else if(checked) //啟動定時器
    {
       delayTime = ui->delayEdit->text();
       mtime->start(delayTime.toInt()*1000);//啟動定時器並設置播放時間間隔
       autoFlag = true;
       //ui->autoPhoto->setCheckState(Qt::Unchecked);
    }

    else if(!checked)//停止定時器
    {
        mtime->stop();//停止定時器
        delayTime.clear();
        autoFlag = false;
    }

}

void MainWindow::autoPhoto()
{
        //int tempCount=0;

        //tempCount =  photoPath.count();
        tempDir.clear();
        tempDir.append(Dir+"/");
        QString path =  photoPath.at(num); //從容器中找到要播放的照片的相對路徑
        tempDir.append(path); //拼接照片的絕對路徑

        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));//顯示圖片

           //判斷自動播放的時候是否播放到了最后一張圖片，如果是則停止自動播放
           if(num ==  (photoPath.count()-1))
           {
               qDebug()<<num;
               mtime->stop();
               num = 0;
               if(autoFlag)
               {
                   autoFlag = false;
               }
               qDebug()<<num;
               ui->autoPhoto->setCheckState(Qt::Unchecked);//把自動播放按鈕置於沒有選擇的狀態
           }
           if(autoFlag)
           {
               num++;
           }
        }
}


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

界面文件mainwindow.ui

  1 <?xml version="1.0" encoding="UTF-8"?>
  2 <ui version="4.0">
  3  <class>MainWindow</class>
  4  <widget class="QMainWindow" name="MainWindow">
  5   <property name="geometry">
  6    <rect>
  7     <x>0</x>
  8     <y>0</y>
  9     <width>702</width>
 10     <height>800</height>
 11    </rect>
 12   </property>
 13   <property name="windowTitle">
 14    <string>MainWindow</string>
 15   </property>
 16   <widget class="QWidget" name="centralWidget">
 17    <widget class="QWidget" name="layoutWidget">
 18     <property name="geometry">
 19      <rect>
 20       <x>10</x>
 21       <y>10</y>
 22       <width>456</width>
 23       <height>49</height>
 24      </rect>
 25     </property>
 26     <layout class="QHBoxLayout" name="horizontalLayout_5">
 27      <item>
 28       <layout class="QVBoxLayout" name="verticalLayout">
 29        <property name="spacing">
 30         <number>0</number>
 31        </property>
 32        <property name="bottomMargin">
 33         <number>0</number>
 34        </property>
 35        <item>
 36         <widget class="QTextBrowser" name="photoPath">
 37          <property name="maximumSize">
 38           <size>
 39            <width>150</width>
 40            <height>20</height>
 41           </size>
 42          </property>
 43         </widget>
 44        </item>
 45        <item>
 46         <layout class="QHBoxLayout" name="horizontalLayout_2">
 47          <item>
 48           <widget class="QPushButton" name="pathBt">
 49            <property name="text">
 50             <string>瀏覽</string>
 51            </property>
 52           </widget>
 53          </item>
 54          <item>
 55           <spacer name="horizontalSpacer_3">
 56            <property name="orientation">
 57             <enum>Qt::Horizontal</enum>
 58            </property>
 59            <property name="sizeHint" stdset="0">
 60             <size>
 61              <width>40</width>
 62              <height>20</height>
 63             </size>
 64            </property>
 65           </spacer>
 66          </item>
 67         </layout>
 68        </item>
 69       </layout>
 70      </item>
 71      <item>
 72       <layout class="QHBoxLayout" name="horizontalLayout_3">
 73        <property name="spacing">
 74         <number>0</number>
 75        </property>
 76        <item>
 77         <spacer name="horizontalSpacer">
 78          <property name="orientation">
 79           <enum>Qt::Horizontal</enum>
 80          </property>
 81          <property name="sizeHint" stdset="0">
 82           <size>
 83            <width>40</width>
 84            <height>20</height>
 85           </size>
 86          </property>
 87         </spacer>
 88        </item>
 89        <item>
 90         <layout class="QHBoxLayout" name="horizontalLayout">
 91          <item>
 92           <widget class="QLineEdit" name="delayEdit">
 93            <property name="maximumSize">
 94             <size>
 95              <width>95</width>
 96              <height>16777215</height>
 97             </size>
 98            </property>
 99            <property name="placeholderText">
100             <string>間隔時間（秒）</string>
101            </property>
102           </widget>
103          </item>
104          <item>
105           <widget class="QCheckBox" name="autoPhoto">
106            <property name="text">
107             <string>自動播放</string>
108            </property>
109           </widget>
110          </item>
111         </layout>
112        </item>
113        <item>
114         <spacer name="horizontalSpacer_2">
115          <property name="orientation">
116           <enum>Qt::Horizontal</enum>
117          </property>
118          <property name="sizeHint" stdset="0">
119           <size>
120            <width>40</width>
121            <height>20</height>
122           </size>
123          </property>
124         </spacer>
125        </item>
126        <item>
127         <spacer name="horizontalSpacer_4">
128          <property name="orientation">
129           <enum>Qt::Horizontal</enum>
130          </property>
131          <property name="sizeHint" stdset="0">
132           <size>
133            <width>40</width>
134            <height>20</height>
135           </size>
136          </property>
137         </spacer>
138        </item>
139       </layout>
140      </item>
141     </layout>
142    </widget>
143    <widget class="QWidget" name="layoutWidget">
144     <property name="geometry">
145      <rect>
146       <x>12</x>
147       <y>62</y>
148       <width>681</width>
149       <height>461</height>
150      </rect>
151     </property>
152     <layout class="QHBoxLayout" name="horizontalLayout_4">
153      <item>
154       <widget class="QListWidget" name="photoList">
155        <property name="sizePolicy">
156         <sizepolicy hsizetype="Expanding" vsizetype="Minimum">
157          <horstretch>0</horstretch>
158          <verstretch>0</verstretch>
159         </sizepolicy>
160        </property>
161        <property name="maximumSize">
162         <size>
163          <width>120</width>
164          <height>400</height>
165         </size>
166        </property>
167        <property name="sizeIncrement">
168         <size>
169          <width>0</width>
170          <height>0</height>
171         </size>
172        </property>
173        <property name="baseSize">
174         <size>
175          <width>2</width>
176          <height>0</height>
177         </size>
178        </property>
179       </widget>
180      </item>
181      <item>
182       <widget class="QLabel" name="photoShow">
183        <property name="maximumSize">
184         <size>
185          <width>16777215</width>
186          <height>800</height>
187         </size>
188        </property>
189        <property name="text">
190         <string/>
191        </property>
192       </widget>
193      </item>
194     </layout>
195    </widget>
196   </widget>
197   <widget class="QStatusBar" name="statusBar"/>
198  </widget>
199  <layoutdefault spacing="6" margin="11"/>
200  <resources/>
201  <connections/>
202 </ui>

View Code

具體界面如下

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Qt 簡易圖片播放器【html、css、jq】制作一個簡潔的音樂播放器 Android如何制作一個簡易的視頻播放器關於一個簡易的Html5音樂播放器的制作 Qt視頻播放器 PyQT制作視頻播放器 Java視頻播放器的制作制作Java視頻播放器 android 教你制作音樂播放器使用ALVideoPlayerSurface制作視頻播放器