Qt学习之使用QListWidget加载本地图片实现双击放大

目录

一、前言

二、实现效果

三、代码实现

（1）QListWidget的使用

1、QListWidget初始化

2、QListWidget加载本地图片

3、QListWidget样式表设计

4、QListWidget连接信号与槽

（2）自定义QWidget（显示放大的图片）

1、imageWin构造函数

2、事件过滤器

四、全部代码

1、listWidgetUse头文件（.h）

2、listWidgetUse源文件（.cpp）

3、imageWin头文件（.h）

4、imageWin源文件（.cpp）

---

一、前言

        QListWidget的列表项显示方式有两种，一种是IconMode（图标模式），一种是ListMode（列表模式），本文介绍IconMode（图标模式）的使用，加载本地图片，双击列表的每一项可以进行图片放大。

二、实现效果

三、代码实现

（1）QListWidget的使用

1、QListWidget初始化

        设置列表项的大小，设置显示模式，设置大小自适应，设置列表项为静态不可移动。

imgList = new QListWidget;
imgList->setIconSize(QSize(125,125));//设置单个Icon大小
imgList->setViewMode(QListView::IconMode);//设置显示模式
imgList->setFlow(QListView::LeftToRight);//从左到右
imgList->setResizeMode(QListView::Adjust);//大小自适应
imgList->setMovement(QListView::Static);//设置列表每一项不可移动

2、QListWidget加载本地图片

        加载工程目录下的image/pngImage文件夹里的png和jpg格式的图片，如下图所示。

 代码

//path为QString类型
path=QString(QDir::currentPath()+"/image/pngImage/");//本地图片路径
QDir dir(path);

//namefiles和files为QStringList类型
namefiles<<"*.png"<<"*.jpg";

//查找本地图片路径下的png后缀和jpg后缀的图片名  xxx.png  xxx.jpg
files=dir.entryList(namefiles,QDir::Files|QDir::Readable,QDir::Name);

//动态添加item到QListWidget里
for(int i=0;i<files.size();i++)
{
    QListWidgetItem *newitem=new QListWidgetItem(QIcon(QPixmap(path+"/"+files.at(i)).scaled(125, 125)),files.at(i));
    QFileInfo fi = files.at(i);
    newitem->setText(fi.baseName());//Returns the base name of the file without the path
    newitem->setTextAlignment(Qt::AlignHCenter);//设置文字对齐方式：水平居中
    imgList->addItem(newitem);
}

3、QListWidget样式表设计

        通过设计QListWidget样式表，实现鼠标滑过列表每一项有选中的动态效果。

//样式表设计
imgList->setStyleSheet("QListWidget{border:none; color:black;outline:0px; }"
                         "QListWidget::Item{padding-left:0px;padding-top:20px; padding-bottom:4px;color:black}"
                         "QListWidget::Item:hover{background:lightgray; color:green;}"
                         "QListWidget::item:selected{background:lightgray; color:green; }"
                         );

4、QListWidget连接信号与槽

        QListWidget有个列表项双击的信号：itemDoubleClicked(QListWidgetItem*)。

connect(imgList, SIGNAL(itemDoubleClicked(QListWidgetItem*)), this, SLOT(enlargeImage(QListWidgetItem *)));

        槽函数：

void listWidgetUse::enlargeImage(QListWidgetItem *item)
{
    QRect rect = this->geometry();//获取当前窗口坐标及大小 x、y、w、h
    
    //通过自定义的窗口显示图片
    imageWin *showImageWidget = new imageWin(item , QRect(rect.x(), rect.y()+rect.y()*1/4, rect.width(), rect.height()*2/3));
    showImageWidget->show();
}

（2）自定义QWidget（显示放大的图片）

        自定义imageWin类继承与QWidget，并重载构造函数。

1、imageWin构造函数

        实现思路为：获取item里的pixmap，然后将pixmap通过QLabel加载显示。

imageWin::imageWin(QListWidgetItem *item, QRect rect, QWidget *parent): QWidget(parent)
{
    qApp->installEventFilter(this);
    this->setGeometry(rect);//设置显示图片窗口的x、y、w、h
    this->setFixedSize(rect.width(), rect.height());//设置窗口固定大小
    this->setWindowIcon(item->icon());
    this->setWindowTitle("查看图片");
    this->setWindowModality(Qt::ApplicationModal);//阻塞除当前窗体外的其他所有窗体

    //通过QLabel加载item上的图片
    QLabel *lab = new QLabel(this);
    lab->setFixedSize(this->width(), this->height());
    lab->setPixmap(item->icon().pixmap(QSize(this->width(), this->height())).scaled(lab->width(),lab->height()));

}

2、事件过滤器

        使用事件过滤器主要目的是实现点击窗口的任意位置可以关闭窗口。

//事件过滤器，实现点击窗口任意位置，窗口就可以关闭
bool imageWin::eventFilter(QObject *obj, QEvent *e)
{
    if(e->type() == QEvent::MouseButtonPress)
    {
        this->close();
    }
    return QWidget::eventFilter(obj, e);
}

四、全部代码

1、listWidgetUse头文件（.h）

#ifndef LISTWIDGETUSE_H
#define LISTWIDGETUSE_H

#include <QWidget>
#include <QListWidget>
#include <QString>

class listWidgetUse : public QWidget
{
    Q_OBJECT
public:
    explicit listWidgetUse(QWidget *parent = 0);

private:
    QListWidget *imgList;
    QString path;
    QStringList namefiles, files;

signals:

public slots:
    void enlargeImage(QListWidgetItem *item);//放大图片
};

#endif // LISTWIDGETUSE_H

2、listWidgetUse源文件（.cpp）

#include "listwidgetuse.h"
#include "imagewin.h"
#include <QVBoxLayout>
#include <QDir>
#include <QDebug>

listWidgetUse::listWidgetUse(QWidget *parent) : QWidget(parent)
{
    this->setWindowTitle("listWidget的使用");
    this->resize(600, 600);

    imgList = new QListWidget;
    imgList->setIconSize(QSize(125,125));//设置单个Icon大小
    imgList->setViewMode(QListView::IconMode);//设置显示模式
    imgList->setFlow(QListView::LeftToRight);//从左到右
    imgList->setResizeMode(QListView::Adjust);//大小自适应
    imgList->setMovement(QListView::Static);//设置列表每一项不可移动

    path=QString(QDir::currentPath()+"/image/pngImage/");//本地图片路径
    QDir dir(path);

    //namefiles和files为QStringList类型
    namefiles<<"*.png"<<"*.jpg";

    //查找本地图片路径下的png后缀和jpg后缀的图片名  xxx.png  xxx.jpg
    files=dir.entryList(namefiles,QDir::Files|QDir::Readable,QDir::Name);
    for(int i=0;i<files.size();i++)
    {
        qDebug()<<files.at(i);
        QListWidgetItem *newitem=new QListWidgetItem(QIcon(QPixmap(path+"/"+files.at(i)).scaled(125, 125)),files.at(i));
        QFileInfo fi = files.at(i);
        newitem->setText(fi.baseName());//Returns the base name of the file without the path
        newitem->setTextAlignment(Qt::AlignHCenter);
        imgList->addItem(newitem);
    }
    //样式表设计
    imgList->setStyleSheet("QListWidget{border:none; color:black;outline:0px; }"
                             "QListWidget::Item{padding-left:0px;padding-top:20px; padding-bottom:4px;color:black}"
                             "QListWidget::Item:hover{background:lightgray; color:green;}"
                             "QListWidget::item:selected{background:lightgray; color:green; }"
                             );
    connect(imgList, SIGNAL(itemDoubleClicked(QListWidgetItem*)), this, SLOT(enlargeImage(QListWidgetItem *)));

    QVBoxLayout *vlayout = new QVBoxLayout(this);
    vlayout->addWidget(imgList);
}

void listWidgetUse::enlargeImage(QListWidgetItem *item)
{
    QRect rect = this->geometry();//获取当前窗口坐标及大小 x、y、w、h

    //通过自定义的窗口显示图片
    imageWin *showImageWidget = new imageWin(item , QRect(rect.x(), rect.y()+rect.y()*1/4, rect.width(), rect.height()*2/3));
    showImageWidget->show();
}

3、imageWin头文件（.h）

#ifndef IMAGEWIN_H
#define IMAGEWIN_H

#include <QWidget>
#include <QListWidget>
#include <QRect>

class imageWin : public QWidget
{
    Q_OBJECT
public:
    imageWin(QListWidgetItem *item, QRect rect, QWidget *parent = 0);
    ~imageWin();

private:
    QListWidget *imageWidget;
    QListWidgetItem *item;

signals:

public slots:

protected:
    bool eventFilter(QObject *obj, QEvent *e);
};

#endif // IMAGEWIN_H

4、imageWin源文件（.cpp）

#include "imagewin.h"
#include <QEvent>
#include <QApplication>
#include <QLabel>
#include <QPixmap>

imageWin::imageWin(QListWidgetItem *item, QRect rect, QWidget *parent): QWidget(parent)
{
    qApp->installEventFilter(this);
    this->setGeometry(rect);//设置显示图片窗口的x、y、w、h
    this->setFixedSize(rect.width(), rect.height());//设置窗口固定大小
    this->setWindowIcon(item->icon());
    this->setWindowTitle("查看图片");
    this->setWindowModality(Qt::ApplicationModal);//阻塞除当前窗体外的其他所有窗体

    //通过QLabel加载item上的图片
    QLabel *lab = new QLabel(this);
    lab->setFixedSize(this->width(), this->height());
    lab->setPixmap(item->icon().pixmap(QSize(this->width(), this->height())).scaled(lab->width(),lab->height()));

}

imageWin::~imageWin()
{
    delete this;
}

//事件过滤器，实现点击窗口任意位置，窗口就可以关闭
bool imageWin::eventFilter(QObject *obj, QEvent *e)
{
    if(e->type() == QEvent::MouseButtonPress)
    {
        this->close();
    }
    return QWidget::eventFilter(obj, e);
}

原创不易，转载请标明出处。