QT制作一个图片播放器

前言：使用qt制作了一个简单的图片播放器，可以播放gif、png等格式图片

先来看看播放器的功能（当然是很简陋的，没有很深入的设计）：

1、点击图片列表中图片进行播放。

2、自动播放，播放的图片的间隔时间可以自己设定，时间的单位是秒。

3、自动播放的时候再点击图片列表会停止自动播放，保存当前播放的图片的顺序，再次点击自动播放的时候将从当前开始。

4、自动播放到最后一张图片的时候将会停止自动播放，再次点击自动播放的时候将会从第一张图片开始。

先上图看看具体功能：

说完功能我们聊聊制作思路和使用到的主要代码：

1、打开有图片的文件，并获取文件的路径

Dir = QFileDialog::getExistingDirectory(this);//获取文件所在的具体路径

2、把文件的路径显示在指定的窗口

ui->photoPath->setText(Dir);//显示打开的文件的具体路径

3、列出文件中的图片的路径，建立小图标，并把图片路径保存到容器中，方便自动播放

//列出目录下的文件
    for(int i=;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()*);//启动定时器并设置播放时间间隔
       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

 #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 = );
     ~MainWindow();

 private slots:
     void on_pathBt_clicked(); //打开目录

     void on_photoList_clicked(const QModelIndex &index);//单击播放图片

     void on_autoPhoto_clicked(bool checked);//自动播放选择
     void autoPhoto(); //自动播放函数
     void showDinamicPhoto(QString path);//动态图播放（格式为gif）

 private:
     Ui::MainWindow *ui;
     QFile *file;
     QString Dir;//打开文件的路径
     QString tempDir; //照片的绝地路径
     QVector<QString> photoPath;//存放照片相对路径的容器
     QTimer *mtime; //定时器
     QString delayTime; //延时间隔
     bool autoFlag; //判断是否进入的自动播放格式
     int num; //照片张数
 };

 #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 = ;

    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=;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 = ;
    }
    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() == )
    {
        QMessageBox::warning(this,"警告","还没有可以播放的图片");
        ui->autoPhoto->setCheckState(Qt::Unchecked); //把按钮重新置于没有被选中的状态
        return;
    }

    else if(checked) //启动定时器
    {
       delayTime = ui->delayEdit->text();
       mtime->start(delayTime.toInt()*);//启动定时器并设置播放时间间隔
       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()-))
           {
               qDebug()<<num;
               mtime->stop();
               num = ;
               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

 <?xml version="1.0" encoding="UTF-8"?>
 <ui version="4.0">
  <class>MainWindow</class>
  <widget class="QMainWindow" name="MainWindow">
   <property name="geometry">
    <rect>
     <x></x>
     <y></y>
     <width></width>
     <height></height>
    </rect>
   </property>
   <property name="windowTitle">
    <string>MainWindow</string>
   </property>
   <widget class="QWidget" name="centralWidget">
    <widget class="QWidget" name="layoutWidget">
     <property name="geometry">
      <rect>
       <x></x>
       <y></y>
       <width></width>
       <height></height>
      </rect>
     </property>
     <layout class="QHBoxLayout" name="horizontalLayout_5">
      <item>
       <layout class="QVBoxLayout" name="verticalLayout">
        <property name="spacing">
         <number></number>
        </property>
        <property name="bottomMargin">
         <number></number>
        </property>
        <item>
         <widget class="QTextBrowser" name="photoPath">
          <property name="maximumSize">
           <size>
            <width></width>
            <height></height>
           </size>
          </property>
         </widget>
        </item>
        <item>
         <layout class="QHBoxLayout" name="horizontalLayout_2">
          <item>
           <widget class="QPushButton" name="pathBt">
            <property name="text">
             <string>浏览</string>
            </property>
           </widget>
          </item>
          <item>
           <spacer name="horizontalSpacer_3">
            <property name="orientation">
             <enum>Qt::Horizontal</enum>
            </property>
            <property name="sizeHint" stdset="">
             <size>
              <width></width>
              <height></height>
             </size>
            </property>
           </spacer>
          </item>
         </layout>
        </item>
       </layout>
      </item>
      <item>
       <layout class="QHBoxLayout" name="horizontalLayout_3">
        <property name="spacing">
         <number></number>
        </property>
        <item>
         <spacer name="horizontalSpacer">
          <property name="orientation">
           <enum>Qt::Horizontal</enum>
          </property>
          <property name="sizeHint" stdset="">
           <size>
            <width></width>
            <height></height>
           </size>
          </property>
         </spacer>
        </item>
        <item>
         <layout class="QHBoxLayout" name="horizontalLayout">
          <item>
           <widget class="QLineEdit" name="delayEdit">
            <property name="maximumSize">
             <size>
              <width></width>
              <height></height>
             </size>
            </property>
            <property name="placeholderText">
             <string>间隔时间（秒）</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QCheckBox" name="autoPhoto">
            <property name="text">
             <string>自动播放</string>
            </property>
           </widget>
          </item>
         </layout>
        </item>
        <item>
         <spacer name="horizontalSpacer_2">
          <property name="orientation">
           <enum>Qt::Horizontal</enum>
          </property>
          <property name="sizeHint" stdset="">
           <size>
            <width></width>
            <height></height>
           </size>
          </property>
         </spacer>
        </item>
        <item>
         <spacer name="horizontalSpacer_4">
          <property name="orientation">
           <enum>Qt::Horizontal</enum>
          </property>
          <property name="sizeHint" stdset="">
           <size>
            <width></width>
            <height></height>
           </size>
          </property>
         </spacer>
        </item>
       </layout>
      </item>
     </layout>
    </widget>
    <widget class="QWidget" name="layoutWidget">
     <property name="geometry">
      <rect>
       <x></x>
       <y></y>
       <width></width>
       <height></height>
      </rect>
     </property>
     <layout class="QHBoxLayout" name="horizontalLayout_4">
      <item>
       <widget class="QListWidget" name="photoList">
        <property name="sizePolicy">
         <sizepolicy hsizetype="Expanding" vsizetype="Minimum">
          <horstretch></horstretch>
          <verstretch></verstretch>
         </sizepolicy>
        </property>
        <property name="maximumSize">
         <size>
          <width></width>
          <height></height>
         </size>
        </property>
        <property name="sizeIncrement">
         <size>
          <width></width>
          <height></height>
         </size>
        </property>
        <property name="baseSize">
         <size>
          <width></width>
          <height></height>
         </size>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QLabel" name="photoShow">
        <property name="maximumSize">
         <size>
          <width></width>
          <height></height>
         </size>
        </property>
        <property name="text">
         <string/>
        </property>
       </widget>
      </item>
     </layout>
    </widget>
   </widget>
   <widget class="QStatusBar" name="statusBar"/>
  </widget>
  <layoutdefault spacing="" margin=""/>
  <resources/>
  <connections/>
 </ui>

具体界面如下