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_())