QT 实现滚屏显示多张漂亮美眉图片（可放大缩小）

作为新手小白的一些分享。。。。。。。

其中一部分功能要求显示多张图片，如果图片总高度超过工具窗口的高度就要有滚动条出现，实现滚屏的效果，网上这部分内容少之又少，我就把效果和代码都贴出来供大家参考。

想看QT 实现滚屏显示多张漂亮美眉片（可放大缩小），可以跳过第一种方式，直接看第二种方式。

我这里介绍两种方式，首先一种简单的方式，展示效果如下，实现QWidget的滚动条，在Qt Designer中，QScrollArea已经实现好的带有滚动条的控件。

功能实现代码如下，非常简单。

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
 
class MainWindow(QMainWindow):
    def __init__(self,):
        super(QMainWindow,self).__init__()
        self.number = 0
 
        w = QWidget()
        self.setCentralWidget(w)
 
        self.topFiller = QWidget()
        self.topFiller.setMinimumSize(250, 2000)#######设置滚动条的尺寸



        lab1 = QLabel(self.topFiller)
        lab1.setPixmap(QPixmap('demo.jpg'))

        lab2 = QLabel(self.topFiller)
        lab2.setPixmap(QPixmap('demo.jpg'))
        lab2.move(0, 220)


        ##创建一个滚动条
        self.scroll = QScrollArea()
        self.scroll.setWidget(self.topFiller)
 
 
        self.vbox = QVBoxLayout()
        self.vbox.addWidget(self.scroll)
        w.setLayout(self.vbox)
 
        self.statusBar().showMessage("底部信息栏")
        self.resize(600, 500)
 
if __name__ == "__main__":
    app = QApplication(sys.argv)
    mainwindow = MainWindow()
    mainwindow.show()
    sys.exit(app.exec_())
           

第二种方式，用PyQt5高级界面控件QListWidget，先展示一下效果，实现显示漂亮美眉，哈哈哈哈哈哈，是我本人（害羞）：

UI界面代码实现如下：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'ui_ImageBrowserWidget1.ui'
#
# Created by: PyQt5 UI code generator 5.14.2
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets

"被jiemian调用 显示图片的缩略图 并且用滚动条"

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 574)
        self.sliderScale = QtWidgets.QSlider(Form)
        self.sliderScale.setGeometry(QtCore.QRect(20, 0, 361, 22))
        self.sliderScale.setOrientation(QtCore.Qt.Horizontal)
        self.sliderScale.setObjectName("sliderScale")
        self.listWidgetImages = QtWidgets.QListWidget(Form)
        self.listWidgetImages.setGeometry(QtCore.QRect(10, 30, 371, 501))
        self.listWidgetImages.setDragEnabled(True)
        self.listWidgetImages.setMovement(QtWidgets.QListView.Static)
        self.listWidgetImages.setFlow(QtWidgets.QListView.LeftToRight)
        self.listWidgetImages.setResizeMode(QtWidgets.QListView.Adjust)
        self.listWidgetImages.setViewMode(QtWidgets.QListView.IconMode)
        self.listWidgetImages.setModelColumn(0)
        self.listWidgetImages.setObjectName("listWidgetImages")
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(10, 540, 113, 32))
        self.pushButton.setObjectName("pushButton")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.pushButton.setText(_translate("Form", "show plmm"))
           

业务逻辑代码如下，点击"show plmm"按钮，实现多张图片的显示，可放大缩小并滚动：

import sys
import cv2


from PyQt5.QtWidgets import QMainWindow, QApplication, QFileDialog
from PyQt5.QtWidgets import QWidget, QListWidgetItem, QListView
from PyQt5.QtGui import QImage, QPixmap, QIcon
from PyQt5.QtCore import Qt, QSize, pyqtSignal


from ui_ImageBrowserWidget1 import Ui_Form

"显示多张图片的缩略图 加滚动条"

FrameIdxRole = Qt.UserRole + 1


class MyMainForm(QMainWindow, Ui_Form):
    def __init__(self, parent=None):
        super(MyMainForm, self).__init__(parent)

        self.setupUi(self)

        self.pushButton.clicked.connect(self.display)


    def display(self):
        self.listWidgetImages.setViewMode(QListView.IconMode)
        self.listWidgetImages.setModelColumn(1)
        self.listWidgetImages.itemSelectionChanged.connect(self.onItemSelectionChanged)

        # slider
        self.sliderScale.valueChanged.connect(self.onSliderPosChanged)

        for i in range(100):
            image = cv2.imread('plmm.jpg')
            self.add_image_thumbnail(image,"图片",str(i))


    def add_image_thumbnail(self, image, frameIdx, name):
        self.listWidgetImages.itemSelectionChanged.disconnect(self.onItemSelectionChanged)

        height, width, channels = image.shape
        print(image.shape)
        bytes_per_line = width * channels
        print(bytes_per_line)
        qImage = QImage(image.data, width, height, bytes_per_line, QImage.Format_RGB888).rgbSwapped()
        pixmap = QPixmap.fromImage(qImage)

        item = QListWidgetItem(QIcon(pixmap), str(frameIdx) + ": " + name)
        item.setData(FrameIdxRole, frameIdx)

        self.listWidgetImages.addItem(item)

        # to bottom
        # self.listWidgetImages.scrollToBottom()
        self.listWidgetImages.setCurrentRow(self.listWidgetImages.count() - 1)

        print('\033[32;0m  --- add image thumbnail: {}, {} -------'.format(frameIdx, name))

        self.listWidgetImages.itemSelectionChanged.connect(self.onItemSelectionChanged)
        # self.listWidgetImages.it

    def resizeEvent(self, event):
        width = self.listWidgetImages.contentsRect().width()
        self.sliderScale.setMaximum(width)
        self.sliderScale.setValue(width - 40)

    def onItemSelectionChanged(self):
        pass

    def onSliderPosChanged(self, value):
        self.listWidgetImages.setIconSize(QSize(value, value))


if __name__ == "__main__":
    # 固定的，PyQt5程序都需要QApplication对象。sys.argv是命令行参数列表，确保程序可以双击运行
    app = QApplication(sys.argv)
    # 初始化
    myWin = MyMainForm()
    # 将窗口控件显示在屏幕上
    myWin.show()
    # 程序运行，sys.exit方法确保程序完整退出。
    sys.exit(app.exec_())