目录
一、前言
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_H2、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_H4、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);
}原创不易，转载请标明出处。