QListWidget实现图片缩略图列表

最近在学PyQt，跟着一个博主学做一个缩略图列表，来查看文件夹内的图片文件

这里项目的原链接：

PyQt5入门——QListWidget实现图片缩略图列表_pyqt5 图片列表_虾米小馄饨的博客-CSDN博客

在此感谢原博主的高质量文章

下面记录自己学习的过程

（一）示例效果

（二）代码实例

其中，需要用到的QListWidget信号：

      itemSelectionChanged：所选项发生变化时发送

(1)先定义缩略图列表部分

继承自QListWidget。每个QListWidgetItem可以设置QIcon图片和文本。

import os
from qtpy.QtCore import QSize
from qtpy.QtGui import QIcon, QPixmap
from PyQt5.QtWidgets import QListWidget, QListWidgetItem, QListView, QWidget, QApplication, QHBoxLayout,  QLabel
# 定义缩略图列表部分，继承自QListWidget。每一个QListWidgetItem可以设置QIcon图片和文本
class ImageListWidget(QListWidget):
    # def__init__(self):  用于初始化类，只有一个self，指的是实例本身
    def __init__(self):
        # super()用来调用父类(基类)的方法，__init__()是类的构造方法
        # super().__init__() 就是调用父类的init方法， 同样可以使用super()去调用父类的其他方法
        super(ImageListWidget, self).__init__()
        # setFlow 布局方向设定
        # QListView类用于展示数据，它的子类是QListWidget
        self.setFlow(QListView.Flow(1))  # 0: left to right, 1: top to bottom
        # setIconSize改变单元格中图片的尺寸
        self.setIconSize(QSize(150, 100))

    def add_image_items(self, image_paths=[]):
        for img_path in image_paths:
            # os.path.isfile()：判断某一对象(需提供绝对路径)是否为文件
            # os.path.isdir()：判断某一对象(需提供绝对路径)是否为目录
            if os.path.isfile(img_path):
                # os.path.dirname(path)  返回path的目录。其实就是os.path.split(path)的第一个元素
                # os.path.basename(path)  返回path最后的文件名。如何path以／或\结尾，那么就会返回空值。即os.path.split(path)的第二个元素
                img_name = os.path.basename(img_path)
                # QListWidgetItem类为QListWidget类提供构成QListWidget列表部件的项，每个列表部件的项都是一个QListWidgetItem对象
                # QIcon类提供了处于不同模式和状态下的可缩放图标。QIcon可以从给定的一组像素图生成较小，较大，激活和禁用等情况小的像素图。Qt窗口部件使用这些像素图来显示代表特定动作的图标。
                item = QListWidgetItem(QIcon(img_path), img_name)
                # item.setText(img_name)
                # item.setIcon(QIcon(img_path))
                self.addItem(item)

(2)布局窗体控件

左边区域用QLabel加载图像，右边区域是图片缩略图列表，点击缩略图，可以在左边查看大图。

# 布局窗体控件
# 左边区域用QLabel加载图像，右边区域是图片缩略图列表，点击缩略图，可以在左边查看大图
class ImageViewerWidget(QWidget):
    def __init__(self):
        super(QWidget, self).__init__()
        # 显示控件
        self.list_widget = ImageListWidget()  # 调用一下上面定义的缩略图列表类
        # 设置最小宽度
        self.list_widget.setMinimumWidth(200)
        self.show_label = QLabel(self)
        # 使用setFixedSize()这个函数的话不能最大化窗口（窗口最大化的按钮会变成灰色），默认不可进行缩小放大，即窗口为确定大小。
        self.show_label.setFixedSize(600, 400)
        self.image_paths = []
        self.currentImgIdx = 0
        self.currentImg = None

        # 水平布局
        # 采用QBOXLayout类可以在水平和垂直方向上排列控件，QHBoxLayout和QVBoxLayout类继承自QBoxLayout
        # 采用QHBoxLayout类，按照从左到右的顺序来添加控件
        self.layout = QHBoxLayout(self)
        self.layout.addWidget(self.show_label)
        self.layout.addWidget(self.list_widget)

        # 信号与连接
        self.list_widget.itemSelectionChanged.connect(self.loadImage)

    def load_from_paths(self, img_path=[]):
        self.image_paths = img_paths
        self.list_widget.add_image_items(img_paths)

    def loadImage(self):
        """
        在Qt5的QTabWidget类中，在默认情况下是以0开始作为标签索引值，而currentIndex（）函数返回的值指的是
        在当前的页面切换的界面中所停留的那一个页面对应的标签索引值。
        currentIndex().row()可以获取当前点击单元格所在的行序号，currentIndex().column()可以获取当前点击单元格所在的列序号。
        currentIndex().data()可以获取到当前点击单元格的文本；
        """
        self.currentImgIdx = self.list_widget.currentIndex().row()
        if self.currentImgIdx in range(len(self.image_paths)):
            """
            QPixmap类用于绘图设备的图像显示，它可以作为一个QPainterDevice对象，也可以加载到一个控件中，
            通常是标签或者按钮，用于在标签或按钮上显示图像
            QPixmap可以读取的图像文件类型有BMP，GIF，JPG等
            """
            self.currentImg = QPixmap(self.image_paths[self.currentImgIdx]).scaledToHeight(400)
            # setPixmap函数显示图片
            self.show_label.setPixmap(self.currentImg)

(3)加载一些图片路径，并运行窗口

if __name__ == "__main__":
    import sys
    app = QApplication(sys.argv)
    # 图像路径
    img_dir = r"D:\Qt\QtData\PyQt\Thumbnail\picture"
    filenames = os.listdir(img_dir)
    img_paths = []
    for file in filenames:
        if file[-4:] == ".png" or file[-4:] == ".jpg":
            img_paths.append(os.path.join(img_dir, file))

    # 显示控件
    main_widget = ImageViewerWidget()
    main_widget.load_from_paths(img_paths)
    main_widget.setWindowTitle("ImageViewer")
    main_widget.show()

    # 应用程序运行
    sys.exit(app.exec_())

运行效果如下

 到此功能实现