PyQt5中可滚动的QLabel图像

Question

我已经在PyQt5中开发了一个表单。除其他外，它有一个按钮，一个ScrollArea，其中包含QLabel来容纳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>

- Satyaki Dasgupta

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

- eyllanesc