如何在自定义 QListWidget 中将 QLabel 放在另一个上?
How do I put a QLabel onto on another in a custom QListWidget?
我从 here 获得了这段代码,并想为我的项目修改它。不同之处在于我的项目需要图标位于另一个 QLabel 的顶部。使用布局无法实现这一点,所以我决定将 3 个 QLabel(一个用于图标或图片,另一个用于名称,最后一个用于消息)放在 QWidget 的顶部,但我得到一个空 window .这是我的代码。请不要介意使用的尺寸,因为我只想查看显示的小部件并编辑尺寸。
import sys
from PyQt4 import QtGui, QtCore
from PIL import Image, ImageOps
from PIL.ImageQt import ImageQt
class QCustomQWidget (QtGui.QWidget):
def __init__ (self, parent = None):
super(QCustomQWidget, self).__init__(parent)
# self.textQVBoxLayout = QtGui.QVBoxLayout()
self.widget = QtGui.QWidget()
self.widget.setMinimumSize(151, 231)
self.chatMessage = QtGui.QLabel(self.widget)
# self.chatMessage.setGeometry(QtCore.QRect(50, 80, 411, 161))
font = QtGui.QFont()
font.setFamily('Comic Sans MS')
font.setPointSize(11)
self.chatMessage.setFont(font)
self.chatMessage.setMinimumHeight(40)
self.chatMessage.setStyleSheet('''
color: rgb(255, 0, 0);
border: 1px solid #0089ff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 60px;
padding-top: 3px
''')
self.userName = QtGui.QLabel(self.widget)
font = QtGui.QFont()
font.setFamily('Arial Narrow')
font.setBold(True)
font.setPointSize(11)
self.userName.setFont(font)
self.userName.setFixedHeight(30)
self.userName.setAlignment(QtCore.Qt.AlignTop)
self.userName.setStyleSheet('''
color: rgb(255, 255, 255);
background-color: #0089ff;
border: 1px solid #0089ff;
border-bottom: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-left: 60px;
''')
# self.textQVBoxLayout.addWidget(self.userName)
# self.textQVBoxLayout.addWidget(self.chatMessage)
# self.allQHBoxLayout = QtGui.QHBoxLayout()
self.iconQLabel = QtGui.QLabel(self.widget)
#self.allQHBoxLayout.setSpacing(0)
#self.allQHBoxLayout.addWidget(self.iconQLabel, 0)
#self.allQHBoxLayout.addLayout(self.textQVBoxLayout, 1)
#self.setLayout(self.allQHBoxLayout)
# self.iconQLabel.setFixedSize(60, 60)
self.userName.setFixedWidth(190)
def chat_messages (self, text):
self.chatMessage.setText(text)
def setTextUp (self, text):
self.userName.setText(text)
def setIcon (self, imagePath):
mask = Image.open('Images\Mask.png').convert('L')
image = Image.open('Images\pro.jpg')
output = ImageOps.fit(image, mask.size, centering=(0.5, 0.5))
output.putalpha(mask)
output.save('pic.png')
im = Image.open('pic.png')
size =60, 60
im.thumbnail(size, Image.LANCZOS)
im = im.convert('RGBA')
image1 = ImageQt(im)
image2 = QtGui.QImage(image1)
pixmap = QtGui.QPixmap.fromImage(image2)
self.iconQLabel.setPixmap(QtGui.QPixmap(pixmap))
class exampleQMainWindow (QtGui.QMainWindow):
def __init__ (self):
super(exampleQMainWindow, self).__init__()
self.showMaximized()
self.myQListWidget = QtGui.QListWidget(self)
for icon, name, message in [
('pic.png', 'Name', 'Message'),
(pic.png', 'Name', 'Message')]:
myQCustomQWidget = QCustomQWidget()
myQCustomQWidget.setTextUp(name)
myQCustomQWidget.chat_messages(message)
myQCustomQWidget.setIcon(icon)
myQListWidgetItem = QtGui.QListWidgetItem(self.myQListWidget)
myQListWidgetItem.setSizeHint(myQCustomQWidget.sizeHint())
self.myQListWidget.addItem(myQListWidgetItem)
self.myQListWidget.setCurrentRow(-1)
self.myQListWidget.setItemWidget(myQListWidgetItem, myQCustomQWidget)
self.myQListWidget.scrollToBottom()
self.myQListWidget.setAutoScrollMargin(15)
self.myQListWidget.setSelectionRectVisible(False)
self.myQListWidget.setUniformItemSizes(False)
self.setCentralWidget(self.myQListWidget)
self.setMinimumSize(660, 500)
app = QtGui.QApplication([])
window = exampleQMainWindow()
window.show()
sys.exit(app.exec_())
类似这样,但颜色不同
您的代码有 2 个错误:
widgets是相对parent定位的,如果它们没有parent,它们将不会显示,除非它们是topLevel,比如exampleQMainWindow
,其他的是显示的必须有父项。在你的 QCustomQWidget
的情况下,所有标签都有一个 self.widget
作为它们的父标签,而 self.widget
没有父标签,所以它不显示,子标签也不显示。简单的解决方案是将他作为 self.widget
的父级传递给 self
,但检查他的代码并不是使用 self.widget
所必需的,因此解决方案是消除它并作为父级传递所有 QLabel
到 self
.
不使用布局时 sizeHint()
returns 一个值 QSize(-1, -1)
所以它不会显示任何内容,你有责任设置一个合适的 sizeHint()
,在我的解决方案中,我将放置一个您应该更改的值。
class QCustomQWidget (QtGui.QWidget):
def __init__ (self, parent = None):
super(QCustomQWidget, self).__init__(parent)
# self.textQVBoxLayout = QtGui.QVBoxLayout()
self.setMinimumSize(151, 231)
self.chatMessage = QtGui.QLabel(self)
# self.chatMessage.setGeometry(QtCore.QRect(50, 80, 411, 161))
font = QtGui.QFont()
font.setFamily('Comic Sans MS')
font.setPointSize(11)
self.chatMessage.setFont(font)
self.chatMessage.setMinimumHeight(40)
self.chatMessage.setStyleSheet('''
color: rgb(255, 0, 0);
border: 1px solid #0089ff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 60px;
padding-top: 3px
''')
self.userName = QtGui.QLabel(self)
font = QtGui.QFont()
font.setFamily('Arial Narrow')
font.setBold(True)
font.setPointSize(11)
self.userName.setFont(font)
self.userName.setFixedHeight(30)
self.userName.setAlignment(QtCore.Qt.AlignTop)
self.userName.setStyleSheet('''
color: rgb(255, 255, 255);
background-color: #0089ff;
border: 1px solid #0089ff;
border-bottom: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-left: 60px;
''')
# self.textQVBoxLayout.addWidget(self.userName)
# self.textQVBoxLayout.addWidget(self.chatMessage)
# self.allQHBoxLayout = QtGui.QHBoxLayout()
self.iconQLabel = QtGui.QLabel(self)
#self.allQHBoxLayout.setSpacing(0)
#self.allQHBoxLayout.addWidget(self.iconQLabel, 0)
#self.allQHBoxLayout.addLayout(self.textQVBoxLayout, 1)
#self.setLayout(self.allQHBoxLayout)
# self.iconQLabel.setFixedSize(60, 60)
self.userName.setFixedWidth(190)
def chat_messages (self, text):
self.chatMessage.setText(text)
def setTextUp (self, text):
self.userName.setText(text)
def setIcon (self, imagePath):
mask = Image.open('Images\Mask.png').convert('L')
image = Image.open('Images\pro.jpg')
output = ImageOps.fit(image, mask.size, centering=(0.5, 0.5))
output.putalpha(mask)
output.save('pic.png')
im = Image.open('pic.png')
size =60, 60
im.thumbnail(size, Image.LANCZOS)
im = im.convert('RGBA')
image1 = ImageQt(im)
image2 = QtGui.QImage(image1)
pixmap = QtGui.QPixmap.fromImage(image2)
self.iconQLabel.setPixmap(QtGui.QPixmap(pixmap))
def sizeHint(self):
return QtCore.QSize(60, 60)
我从 here 获得了这段代码,并想为我的项目修改它。不同之处在于我的项目需要图标位于另一个 QLabel 的顶部。使用布局无法实现这一点,所以我决定将 3 个 QLabel(一个用于图标或图片,另一个用于名称,最后一个用于消息)放在 QWidget 的顶部,但我得到一个空 window .这是我的代码。请不要介意使用的尺寸,因为我只想查看显示的小部件并编辑尺寸。
import sys
from PyQt4 import QtGui, QtCore
from PIL import Image, ImageOps
from PIL.ImageQt import ImageQt
class QCustomQWidget (QtGui.QWidget):
def __init__ (self, parent = None):
super(QCustomQWidget, self).__init__(parent)
# self.textQVBoxLayout = QtGui.QVBoxLayout()
self.widget = QtGui.QWidget()
self.widget.setMinimumSize(151, 231)
self.chatMessage = QtGui.QLabel(self.widget)
# self.chatMessage.setGeometry(QtCore.QRect(50, 80, 411, 161))
font = QtGui.QFont()
font.setFamily('Comic Sans MS')
font.setPointSize(11)
self.chatMessage.setFont(font)
self.chatMessage.setMinimumHeight(40)
self.chatMessage.setStyleSheet('''
color: rgb(255, 0, 0);
border: 1px solid #0089ff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 60px;
padding-top: 3px
''')
self.userName = QtGui.QLabel(self.widget)
font = QtGui.QFont()
font.setFamily('Arial Narrow')
font.setBold(True)
font.setPointSize(11)
self.userName.setFont(font)
self.userName.setFixedHeight(30)
self.userName.setAlignment(QtCore.Qt.AlignTop)
self.userName.setStyleSheet('''
color: rgb(255, 255, 255);
background-color: #0089ff;
border: 1px solid #0089ff;
border-bottom: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-left: 60px;
''')
# self.textQVBoxLayout.addWidget(self.userName)
# self.textQVBoxLayout.addWidget(self.chatMessage)
# self.allQHBoxLayout = QtGui.QHBoxLayout()
self.iconQLabel = QtGui.QLabel(self.widget)
#self.allQHBoxLayout.setSpacing(0)
#self.allQHBoxLayout.addWidget(self.iconQLabel, 0)
#self.allQHBoxLayout.addLayout(self.textQVBoxLayout, 1)
#self.setLayout(self.allQHBoxLayout)
# self.iconQLabel.setFixedSize(60, 60)
self.userName.setFixedWidth(190)
def chat_messages (self, text):
self.chatMessage.setText(text)
def setTextUp (self, text):
self.userName.setText(text)
def setIcon (self, imagePath):
mask = Image.open('Images\Mask.png').convert('L')
image = Image.open('Images\pro.jpg')
output = ImageOps.fit(image, mask.size, centering=(0.5, 0.5))
output.putalpha(mask)
output.save('pic.png')
im = Image.open('pic.png')
size =60, 60
im.thumbnail(size, Image.LANCZOS)
im = im.convert('RGBA')
image1 = ImageQt(im)
image2 = QtGui.QImage(image1)
pixmap = QtGui.QPixmap.fromImage(image2)
self.iconQLabel.setPixmap(QtGui.QPixmap(pixmap))
class exampleQMainWindow (QtGui.QMainWindow):
def __init__ (self):
super(exampleQMainWindow, self).__init__()
self.showMaximized()
self.myQListWidget = QtGui.QListWidget(self)
for icon, name, message in [
('pic.png', 'Name', 'Message'),
(pic.png', 'Name', 'Message')]:
myQCustomQWidget = QCustomQWidget()
myQCustomQWidget.setTextUp(name)
myQCustomQWidget.chat_messages(message)
myQCustomQWidget.setIcon(icon)
myQListWidgetItem = QtGui.QListWidgetItem(self.myQListWidget)
myQListWidgetItem.setSizeHint(myQCustomQWidget.sizeHint())
self.myQListWidget.addItem(myQListWidgetItem)
self.myQListWidget.setCurrentRow(-1)
self.myQListWidget.setItemWidget(myQListWidgetItem, myQCustomQWidget)
self.myQListWidget.scrollToBottom()
self.myQListWidget.setAutoScrollMargin(15)
self.myQListWidget.setSelectionRectVisible(False)
self.myQListWidget.setUniformItemSizes(False)
self.setCentralWidget(self.myQListWidget)
self.setMinimumSize(660, 500)
app = QtGui.QApplication([])
window = exampleQMainWindow()
window.show()
sys.exit(app.exec_())
类似这样,但颜色不同
您的代码有 2 个错误:
widgets是相对parent定位的,如果它们没有parent,它们将不会显示,除非它们是topLevel,比如
exampleQMainWindow
,其他的是显示的必须有父项。在你的QCustomQWidget
的情况下,所有标签都有一个self.widget
作为它们的父标签,而self.widget
没有父标签,所以它不显示,子标签也不显示。简单的解决方案是将他作为self.widget
的父级传递给self
,但检查他的代码并不是使用self.widget
所必需的,因此解决方案是消除它并作为父级传递所有QLabel
到self
.不使用布局时
sizeHint()
returns 一个值QSize(-1, -1)
所以它不会显示任何内容,你有责任设置一个合适的sizeHint()
,在我的解决方案中,我将放置一个您应该更改的值。
class QCustomQWidget (QtGui.QWidget):
def __init__ (self, parent = None):
super(QCustomQWidget, self).__init__(parent)
# self.textQVBoxLayout = QtGui.QVBoxLayout()
self.setMinimumSize(151, 231)
self.chatMessage = QtGui.QLabel(self)
# self.chatMessage.setGeometry(QtCore.QRect(50, 80, 411, 161))
font = QtGui.QFont()
font.setFamily('Comic Sans MS')
font.setPointSize(11)
self.chatMessage.setFont(font)
self.chatMessage.setMinimumHeight(40)
self.chatMessage.setStyleSheet('''
color: rgb(255, 0, 0);
border: 1px solid #0089ff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 60px;
padding-top: 3px
''')
self.userName = QtGui.QLabel(self)
font = QtGui.QFont()
font.setFamily('Arial Narrow')
font.setBold(True)
font.setPointSize(11)
self.userName.setFont(font)
self.userName.setFixedHeight(30)
self.userName.setAlignment(QtCore.Qt.AlignTop)
self.userName.setStyleSheet('''
color: rgb(255, 255, 255);
background-color: #0089ff;
border: 1px solid #0089ff;
border-bottom: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-left: 60px;
''')
# self.textQVBoxLayout.addWidget(self.userName)
# self.textQVBoxLayout.addWidget(self.chatMessage)
# self.allQHBoxLayout = QtGui.QHBoxLayout()
self.iconQLabel = QtGui.QLabel(self)
#self.allQHBoxLayout.setSpacing(0)
#self.allQHBoxLayout.addWidget(self.iconQLabel, 0)
#self.allQHBoxLayout.addLayout(self.textQVBoxLayout, 1)
#self.setLayout(self.allQHBoxLayout)
# self.iconQLabel.setFixedSize(60, 60)
self.userName.setFixedWidth(190)
def chat_messages (self, text):
self.chatMessage.setText(text)
def setTextUp (self, text):
self.userName.setText(text)
def setIcon (self, imagePath):
mask = Image.open('Images\Mask.png').convert('L')
image = Image.open('Images\pro.jpg')
output = ImageOps.fit(image, mask.size, centering=(0.5, 0.5))
output.putalpha(mask)
output.save('pic.png')
im = Image.open('pic.png')
size =60, 60
im.thumbnail(size, Image.LANCZOS)
im = im.convert('RGBA')
image1 = ImageQt(im)
image2 = QtGui.QImage(image1)
pixmap = QtGui.QPixmap.fromImage(image2)
self.iconQLabel.setPixmap(QtGui.QPixmap(pixmap))
def sizeHint(self):
return QtCore.QSize(60, 60)