PyQt5 中的可滚动 QLabel 图像

Question

我在 PyQt5 中开发了一个表单。除其他外，它有一个按钮，一个包含 QLabel 的 ScrollArea 来保存 pixMap。点击按钮 .jpg 图像将显示在标签中。图像的高度、宽度远大于QLabel。显示图像但未启用滚动条。这是图片、代码和.ui

图片

import sys, PyQt5, os, cv2
from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtWidgets import QDialog

from PIL import Image
from PIL.ImageQt import ImageQt

from PyQt5.uic import loadUi


class photo(QDialog):
    def __init__(self,parent=None):
        super(photo, self).__init__(parent)
        loadUi('EmployeeUpdate.ui', self)
        self.btn.clicked.connect(self.attachImage)

    def attachImage(self):
        conImage = Image.open("G:/Data Analytics/Resnsol Face Recognition/a.jpg")
        print(conImage.width,conImage.height)
        pixMap = QtGui.QPixmap.fromImage(ImageQt(conImage))
        self.imageLabel.setPixmap(pixMap)
        #self.imageScrollArea.setGeometry(510, 380, 200, 195)

        self.imageScrollArea.setWidgetResizable(True)

        self.imageLabel.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)


def main():
    app = PyQt5.QtWidgets.QApplication(sys.argv)
    window = photo()
    #window.attachImage()
    window.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

.ui 文件

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Dialog</class>
 <widget class="QDialog" name="Dialog">
  <property name="windowModality">
   <enum>Qt::ApplicationModal</enum>
  </property>
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>1265</width>
    <height>708</height>
   </rect>
  </property>
  <property name="baseSize">
   <size>
    <width>600</width>
    <height>600</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>Employee Update</string>
  </property>
  <property name="modal">
   <bool>true</bool>
  </property>
  <widget class="QTableWidget" name="employeeTableWidget">
   <property name="geometry">
    <rect>
     <x>10</x>
     <y>90</y>
     <width>1241</width>
     <height>261</height>
    </rect>
   </property>
   <property name="alternatingRowColors">
    <bool>true</bool>
   </property>
   <property name="rowCount">
    <number>7</number>
   </property>
   <property name="columnCount">
    <number>12</number>
   </property>
   <attribute name="horizontalHeaderShowSortIndicator" stdset="0">
    <bool>true</bool>
   </attribute>
   <row/>
   <row/>
   <row/>
   <row/>
   <row/>
   <row/>
   <row/>
   <column>
    <property name="text">
     <string>Id</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>First Name</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Last Name</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Address1</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Address2</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>City</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>State</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Pin</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Date of Birth</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Gender</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Photo</string>
    </property>
    <property name="toolTip">
     <string>Click to take photo</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <column>
    <property name="text">
     <string>Del</string>
    </property>
    <property name="toolTip">
     <string>Click to delete record</string>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
   </column>
   <item row="0" column="0">
    <property name="text">
     <string/>
    </property>
   </item>
  </widget>
  <widget class="QLabel" name="idLabel">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>30</y>
     <width>16</width>
     <height>16</height>
    </rect>
   </property>
   <property name="text">
    <string>Id</string>
   </property>
  </widget>
  <widget class="QLineEdit" name="idText">
   <property name="geometry">
    <rect>
     <x>40</x>
     <y>30</y>
     <width>113</width>
     <height>20</height>
    </rect>
   </property>
  </widget>
  <widget class="QLabel" name="firstNameLabel">
   <property name="geometry">
    <rect>
     <x>160</x>
     <y>30</y>
     <width>51</width>
     <height>16</height>
    </rect>
   </property>
   <property name="text">
    <string>First Name</string>
   </property>
  </widget>
  <widget class="QLineEdit" name="firstNameText">
   <property name="geometry">
    <rect>
     <x>220</x>
     <y>30</y>
     <width>113</width>
     <height>20</height>
    </rect>
   </property>
  </widget>
  <widget class="QLabel" name="lastNameLabel">
   <property name="geometry">
    <rect>
     <x>340</x>
     <y>30</y>
     <width>51</width>
     <height>16</height>
    </rect>
   </property>
   <property name="text">
    <string>Last Name</string>
   </property>
  </widget>
  <widget class="QLineEdit" name="lastNameText">
   <property name="geometry">
    <rect>
     <x>400</x>
     <y>30</y>
     <width>113</width>
     <height>20</height>
    </rect>
   </property>
   <property name="text">
    <string>1</string>
   </property>
  </widget>
  <widget class="QPushButton" name="searchButton">
   <property name="geometry">
    <rect>
     <x>530</x>
     <y>30</y>
     <width>75</width>
     <height>23</height>
    </rect>
   </property>
   <property name="text">
    <string>Search</string>
   </property>
   <property name="default">
    <bool>true</bool>
   </property>
  </widget>
  <widget class="QLabel" name="ErrorBar">
   <property name="geometry">
    <rect>
     <x>-50</x>
     <y>620</y>
     <width>601</width>
     <height>31</height>
    </rect>
   </property>
   <property name="text">
    <string/>
   </property>
   <property name="wordWrap">
    <bool>true</bool>
   </property>
  </widget>
  <widget class="QScrollArea" name="imageScrollArea">
   <property name="geometry">
    <rect>
     <x>120</x>
     <y>390</y>
     <width>231</width>
     <height>171</height>
    </rect>
   </property>
   <property name="verticalScrollBarPolicy">
    <enum>Qt::ScrollBarAlwaysOn</enum>
   </property>
   <property name="horizontalScrollBarPolicy">
    <enum>Qt::ScrollBarAlwaysOn</enum>
   </property>
   <property name="widgetResizable">
    <bool>true</bool>
   </property>
   <widget class="QWidget" name="scrollAreaWidgetContents">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>212</width>
      <height>152</height>
     </rect>
    </property>
    <widget class="QLabel" name="imageLabel">
     <property name="geometry">
      <rect>
       <x>0</x>
       <y>0</y>
       <width>285</width>
       <height>171</height>
      </rect>
     </property>
     <property name="autoFillBackground">
      <bool>false</bool>
     </property>
     <property name="styleSheet">
      <string notr="true">font: 20pt &quot;MS Shell Dlg 2&quot;;</string>
     </property>
     <property name="frameShape">
      <enum>QFrame::NoFrame</enum>
     </property>
     <property name="text">
      <string/>
     </property>
     <property name="textFormat">
      <enum>Qt::AutoText</enum>
     </property>
     <property name="scaledContents">
      <bool>false</bool>
     </property>
     <property name="alignment">
      <set>Qt::AlignCenter</set>
     </property>
    </widget>
   </widget>
  </widget>
  <widget class="QPushButton" name="btn">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>510</y>
     <width>75</width>
     <height>23</height>
    </rect>
   </property>
   <property name="text">
    <string>PushButton</string>
   </property>
  </widget>
 </widget>
 <tabstops>
  <tabstop>idText</tabstop>
  <tabstop>firstNameText</tabstop>
  <tabstop>lastNameText</tabstop>
  <tabstop>searchButton</tabstop>
  <tabstop>employeeTableWidget</tabstop>
 </tabstops>
 <resources/>
 <connections/>
</ui>

Answer 1

当您使用 Qt Designer 创建 QScrollArea 时，会创建一个名为 scrollAreaWidgetContents 的小部件，这是 QScrollArea 内的小部件，因此它的大小用于确定滚动条中显示的内容，在您的情况下 imageLabel 是它的子 scrollAreaWidgetContents已观察到，但 scrollAreaWidgetContents 不知道 imageLabel 的大小，因此在这些情况下，您必须使用布局以使 scrollAreaWidgetContents 的最小大小与 imageLabel 的大小匹配。

import sys
from PyQt5 import QtCore, QtGui, QtWidgets, uic


class photo(QtWidgets.QDialog):
    def __init__(self,parent=None):
        super(photo, self).__init__(parent)
        uic.loadUi('EmployeeUpdate.ui', self)
        self.btn.clicked.connect(self.attachImage)

    def attachImage(self):
        lay = QtWidgets.QVBoxLayout(self.scrollAreaWidgetContents)
        lay.setContentsMargins(0, 0, 0, 0)
        lay.addWidget(self.imageLabel)
        path = "G:/Data Analytics/Resnsol Face Recognition/a.jpg"
        pixMap = QtGui.QPixmap(path)
        self.imageLabel.setPixmap(pixMap)
        self.imageScrollArea.setWidgetResizable(True)
        self.imageLabel.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)


def main():
    app = QtWidgets.QApplication(sys.argv)
    window = photo()
    #window.attachImage()
    window.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()