一、前言

二、实现效果

三、代码实现

（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 pathnewitem->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、hthis->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.jpgfiles=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 pathnewitem->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、hthis->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);
}

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

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

ios网络学习------4 UIWebView的加载本地数据的三种方式
ios网络学习------4 UIWebView的加载本地数据的三种方式分类: IOS2014-06-27 12:56 959人阅读评论(0) 收藏举报 UIWebView是IOS内置的浏览器, ...
c语言加载本地图片,Unity加载本地图片的2种方式
1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...
UIWebView如何加载本地图片
UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
剖析Picasso加载压缩本地图片流程（解决Android 5.0部分机型无法加载本地图片的问题）
之前项目中使用Picasso遇到了一个问题:在Android 5.0以上版本的部分手机上使用Picasso加载本地图片会失败.为了解决这个问题,研究了一下Picasso加载和压缩本地图片的流程,才有了 ...
ios html异步加载图片,iOS 异步加载本地图片
iOS 异步加载本地图片问题当某个界面使用系统API + (nullable UIImage *)imageNamed:(NSString *)name;加载了过多本地图片资源时,不可避免的会产生 ...
短视频系统源代码，加载本地图片和加载网络图片
在短视频系统源代码中,上传照片时会涉及到加载本地图片或加载网络图片的情况,下面介绍一下相关代码从布局开始 <?xml version="1.0" encoding=&quo ...
Android 加载本地图片(文件管理器中的图片墙)
Android 加载本地图片(文件管理器中的图片墙) --关于图片墙的一些感悟与疑问,希望大家共同探讨. (By伊叶也) 图片显示及监听 1.图片显示:基本上就5种显示形式(如果同时嵌入5种形式,采用 ...
可以加载本地图片和网络资源的轮播图：TuTu
轮播图可以加载本地图片或者网络资源的无限循环的轮播图,一行代码调用,图片三级缓存,节省流量,间隔自己设置,使用方便. 1.你只要写好布局就行,布局写成啥样你自己决定,扩展性强,满足多样化需求例如: ...

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）

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

最新文章

热门文章