QT制作一個圖片播放器
阿新 • • 發佈：2017-12-18
相對 顯示圖片 itl 列表 獲取目錄 ima 完整 功能 state 
前言：使用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
1 #include "mainwindow.h" 2 #include "ui_mainwindow.h" 3 #include <QFileDialog> 4 #include <QDebug> 5 #include <QMessageBox> 6 #include <QMovie> 7 8 MainWindow::MainWindow(QWidget *parent) : 9 QMainWindow(parent), 10 autoFlag(false), 11 ui(new Ui::MainWindow) 12 { 13 ui->setupUi(this); 14 num = 0; 15 16 delayTime.clear(); 17 mtime = new QTimer(); 18 19 //連接自動播放槽函數 20 connect(mtime,SIGNAL(timeout()),this,SLOT(autoPhoto())); 21 } 22 23 MainWindow::~MainWindow() 24 { 25 delete ui; 26 } 27 28 void MainWindow::on_pathBt_clicked() 29 { 30 Dir = QFileDialog::getExistingDirectory(this);//獲取文件所在的具體路徑 31 ui->photoPath->setText(Dir);//顯示打開的文件的具體路徑 32 QDir dir(Dir); 33 QStringList file; 34 QFileInfoList fileList = dir.entryInfoList(file,QDir::Files); //獲取目錄下的文件 35 QString fileDir; //保存圖片所在的路徑 36 37 //列出目錄下的文件 38 for(int i=0;i<fileList.count();i++) 39 { 40 QFileInfo info = fileList.at(i); 41 fileDir.clear(); 42 fileDir.append(Dir + "/"); 43 QString filename = info.fileName(); 44 fileDir.append(filename); 45 photoPath.append(filename);// 把圖片的路徑裝到容器中 46 47 if(info.fileName() == "." || info.fileName() == "..") //跳過這兩個目錄 48 { 49 continue; 50 } 51 QListWidgetItem *item = new QListWidgetItem(QIcon(fileDir),info.fileName());//建立文件縮小圖標 52 ui->photoList->addItem(item);//把圖片相對路徑顯示到窗口中 53 54 } 55 // qDebug()<<ui->photoList->count(); 56 } 57 58 59 //單擊圖片列表中的圖片進行播放，如果當前 60 void MainWindow::on_photoList_clicked(const QModelIndex &index) 61 { 62 63 //如果選中了自動播放的情況下，點擊列表中的內容，則停止自動播放 64 if(autoFlag) //選中自動播放的情況 65 { 66 mtime->stop(); 67 ui->autoPhoto->setCheckState(Qt::Unchecked); 68 autoFlag = false; 69 } 70 71 num = ui->photoList->row(ui->photoList->currentItem()); //獲取當前點擊的內容的行號 72 73 //在沒有選中自動播放的情況下，判斷當前是否點擊了最後一張照片，如果是最後一張照片，在選中自動播放的情況下讓它返回到第一張照片 74 if(!autoFlag) 75 { 76 num == ui->photoList->count(); 77 num = 0; 78 } 79 tempDir.clear(); 80 tempDir.append(Dir+"/"); 81 QString path = ui->photoList->currentItem()->text(); 82 tempDir.append(path); 83 84 //判斷是否是動態圖 85 if(tempDir.endsWith(".gif") || tempDir.endsWith(".Gif")) 86 { 87 showDinamicPhoto(tempDir); 88 } 89 else 90 { 91 ui->photoShow->setScaledContents(true);//顯示圖片的全部 92 ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖片 93 } 94 95 } 96 97 98 //自動播放照片 99 void MainWindow::on_autoPhoto_clicked(bool checked) 100 { 101 if(ui->delayEdit->text().isEmpty()) 102 { 103 QMessageBox::warning(this,"提示","請輸入需要間隔的播放時間（秒）"); 104 ui->autoPhoto->setCheckState(Qt::Unchecked); 105 return; 106 } 107 108 else if(ui->photoList->count() == 0) 109 { 110 QMessageBox::warning(this,"警告","還沒有可以播放的圖片"); 111 ui->autoPhoto->setCheckState(Qt::Unchecked); //把按鈕重新置於沒有被選中的狀態 112 return; 113 } 114 115 else if(checked) //啟動定時器 116 { 117 delayTime = ui->delayEdit->text(); 118 mtime->start(delayTime.toInt()*1000);//啟動定時器並設置播放時間間隔 119 autoFlag = true; 120 ui->autoPhoto->setCheckState(Qt::Unchecked); 121 } 122 else if(!checked)//停止定時器 123 { 124 mtime->stop();//停止定時器 125 delayTime.clear(); 126 autoFlag = false; 127 } 128 } 129 130 void MainWindow::autoPhoto() 131 { 132 133 tempDir.clear(); 134 tempDir.append(Dir+"/"); 135 QString path = photoPath.at(num); //從容器中找到要播放的照片的相對路徑 136 tempDir.append(path); //拼接照片的絕對路徑 137 138 if(tempDir.endsWith(".gif") || tempDir.endsWith(".Gif")) 139 { 140 showDinamicPhoto(tempDir); 141 num++; 142 } 143 144 else if(!(tempDir.endsWith(".gif") || tempDir.endsWith(".Gif"))) 145 { 146 ui->photoShow->setScaledContents(true);//顯示圖片的全部 147 ui->photoShow->setPixmap(QPixmap(tempDir));//顯示圖片 148 num++; 149 } 150 151 //判斷自動播放的時候是否播放到了最後一張圖片，如果是則停止自動播放 152 else if(num == photoPath.count()) 153 { 154 mtime->stop(); 155 num = 0; 156 if(autoFlag) 157 { 158 autoFlag = false; 159 } 160 ui->autoPhoto->setCheckState(Qt::Unchecked);//把自動播放按鈕置於沒有選擇的狀態 161 } 162 } 163 164 165 //播放動態圖 166 void MainWindow::showDinamicPhoto(QString path) 167 { 168 QMovie *movie = new QMovie(path); // path圖片路徑 169 movie->start(); //開始播放動態圖 170 ui->photoShow->setMovie(movie); //將圖片設置為為動態 171 ui->photoShow->setScaledContents(true); //盡可能完整的播放整張動圖 ，此處要設置為true 172 }
界面文件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
具體界面如下
QT制作一個圖片播放器