Search code examples
pythonpyqt5qlistwidget

How to change QListWidget setText position to top?


I am trying to change my QListWidget text title in different position, from right side of the picture to the top:

now it looks like:

enter image description here

I want something looks like this:

enter image description here

my code:

video_thumbnail.setFlow(QListView.LeftToRight)

for i in range(30):
    it = QListWidgetItem()
    it.setIcon(QIcon('test3.png'))
    it.setText(str(i))
    video_thumbnail.addItem(it)
video_thumbnail.setIconSize(QSize(128, 128))

Solution

  • You can use a delegate to modify the position of the icon and the text:

    import sys
    
    from PyQt5.QtCore import QSize, Qt
    from PyQt5.QtGui import QIcon
    from PyQt5.QtWidgets import (
        QApplication,
        QListView,
        QListWidget,
        QListWidgetItem,
        QStyledItemDelegate,
        QStyleOptionViewItem,
    )
    
    
    class StyledItemDelegate(QStyledItemDelegate):
        def initStyleOption(self, option, index):
            super().initStyleOption(option, index)
            option.displayAlignment = Qt.AlignCenter
            option.decorationPosition = QStyleOptionViewItem.Bottom
    
    
    def main():
        app = QApplication(sys.argv)
    
        video_thumbnail = QListWidget(flow=QListView.LeftToRight)
        video_thumbnail.setIconSize(QSize(128, 128))
        delegate = StyledItemDelegate(video_thumbnail)
        video_thumbnail.setItemDelegate(delegate)
    
        for i in range(30):
            it = QListWidgetItem()
            it.setIcon(QIcon("test3.png"))
            it.setText(str(i))
            video_thumbnail.addItem(it)
        video_thumbnail.resize(400, 100)
        video_thumbnail.show()
    
        sys.exit(app.exec_())
    
    
    if __name__ == "__main__":
        main()