[pyqt] 使用自定義QListWidgetItem

一、背景

略。

二、思路

新建自定義類customQListWidgetItem，該類繼承自QListWidgetItem。

新建窗口w(QWidget類)。

新建列表listWidget(QListWidget類)。

新建兩個customQListWidgetItem實例，並將這連個實例加入到listWidget中。

三、代碼

import sys
from PyQt5.Qt import *;
from PyQt5.QtCore import *;
from PyQt5.QtWidgets import *;

# 自定義的item 繼承自QListWidgetItem
class customQListWidgetItem(QListWidgetItem):
    def __init__(self, name, img):
        super().__init__()
        # 自定義item中的widget 用來顯示自定義的內容
        self.widget = QWidget()
        # 用來顯示name
        self.nameLabel = QLabel()
        self.nameLabel.setText(name)
        # 用來顯示avator(圖像)
        self.avatorLabel = QLabel()
        # 設置圖像源 和 圖像大小
        self.avatorLabel.setPixmap(QPixmap(img).scaled(50, 50))
        # 設置佈局用來對nameLabel和avatorLabel進行佈局
        self.hbox = QHBoxLayout()
        self.hbox.addWidget(self.avatorLabel)
        self.hbox.addWidget(self.nameLabel)
        self.hbox.addStretch(1)
        # 設置widget的佈局
        self.widget.setLayout(self.hbox)
        # 設置自定義的QListWidgetItem的sizeHint，不然無法顯示
        self.setSizeHint(self.widget.sizeHint())
 
if __name__ == "__main__":
    app = QApplication(sys.argv)

    # 主窗口
    w = QWidget()
    w.setWindowTitle("QListWindow")
    # 新建QListWidget
    listWidget = QListWidget(w)
    listWidget.resize(300, 300)

    # 新建兩個自定義的QListWidgetItem(customQListWidgetItem)
    item1 = customQListWidgetItem("鯉魚王", "liyuwang.jpg")
    item2 = customQListWidgetItem("可達鴨", "kedaya.jpg")

    # 在listWidget中加入兩個自定義的item
    listWidget.addItem(item1)
    listWidget.setItemWidget(item1, item1.widget)
    listWidget.addItem(item2)
    listWidget.setItemWidget(item2, item2.widget)

    # 綁定點擊槽函數 點擊顯示對應item中的name
    listWidget.itemClicked.connect(lambda item: print(item.nameLabel.text()))

    w.show()
    sys.exit(app.exec_())

四、最終效果

可以看到我自定義的item只包含兩部分，圖像和文字。點擊選項會顯示對應的名字。

五、注意的問題

1、QListWidget.itemClicked.connect()綁定槽函數時會傳遞一個QListWidgetItem參數。

2、在自定義的item（customQListWidgetItem類）中需要.setSizeHint()爲self.widget.sizeHint()不然會無法顯示。

3、使用QLabel.setPixmap(QPixmap(img).scaled(width, height))來設置QLabel中顯示的圖片源和圖片大小