Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

Overlaying text on top of QIcon in QListWidget in Pyside2



  • Say I have a QListWidget in icon mode with multiple QIcons within it that looks like this:

    I populated the QListwidget very simply by looping over the file paths for the images I want to add to the QListWidget:

    for path in pathlist:
        self.HomeListWidget.addItem(QtWidgets.QListWidgetItem(QtGui.QIcon(path),None))
    
    

    How can I overlay text on top of the QIcon without modifying the image? I want the final result to look much like this:

    alt text


  • Qt Champions 2017

    You need to write your own delegate which is inherited from QWidget. Re-implement the paintEvent(..) function to achieve this.

    void paintEvent(....) {
    QPainter p(this).
    p.drawPixmap(icon)
    p.drawRect(..)
    }

    Set this widget object using setItemWidget(...) function.



  • @dheerendra Thanks for your response. Do you have a link to a simple, complete example of somebody doing this? I haven't written my own delegate before, and all of the examples I've been able to find over the past few hours seem unnecessarily complicated for what I'm doing and It's very overwhelming. All the examples I've seen are inheriting from QItemDelegate, not QWidget. Cheers!


  • Qt Champions 2017

    Either you write your own delegate inherit from QItemDelegate & return custom QWidget.

    OR
    Just your custom widget and set the custom Widget using setItemWidget(...) .

    2nd Option seems to easy one.



  • @dheerendra said in Overlaying text on top of QIcon in QListWidget in Pyside2:

    Just your custom widget and set the custom Widget using setItemWidget(...) .

    2nd Option seems to easy one.

    Where's @VRonin...?


  • Lifetime Qt Champion

    Hi,

    There's no need at all for setItemWidget nor a custom widget from a QItemDelegate. A subclass of QStyledItemDelegate with its paint event re-implemented is enough.



  • Sorry but I'll use C++ as I don't know python

    class TextOverDelegate : public QStyledItemDelegate{
        Q_OBJECT
        Q_DISABLE_COPY(TextOverDelegate)
    public:
        explicit TextOverDelegate(QObject* parent = Q_NULLPTR)
            :QStyledItemDelegate(parent)
        {}
        void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const Q_DECL_OVERRIDE{
            QStyledItemDelegate::paint(painter,option,index);
            const QVariant text = index.data(Qt::UserRole);
            if(text.isValid()){
                const QStyle *style = option.widget ? option.widget->style() : QApplication::style();
                style->drawItemText(painter, option.rect, Qt::AlignCenter, option.palette, option.state & QStyle::State_Enabled, text.toString());
            }
        }
    };
    

    This delegate will paint the text stored using QListWidgetItem::setData passing Qt::UserRole



  • @VRonin

    Thanks a bunch for the detailed response! I tried implementing the sublclass of QStyledItemDelegate in Pyside2, however I'm getting AttributeError: 'PySide2.QtWidgets.QListWidget' object has no attribute 'drawItemText' I understand you are not super familiar with Python, but might you or somebody else who is be able to identify what I did wrong? Thank you!

    My Pyside 2 implementation:

    class TextOverDelegate(QStyledItemDelegate):
        def __init__(self, parent=None):
            super(TextOverDelegate, self).__init__(parent)
    
        def paint(self, painter, option, index):
            text = index.data(QtCore.Qt.UserRole)
            if(option.widget):
                style = option.widget
            else:
                style = QApplication.style()
            style.drawItemText(painter, option.rect,QtCore.Qt.AlignCenter, option.palette, option.state & QStyle.State_Enabled, text)
    

    In the main UI window class all I set the new delegate as the list widget's current item delegate.

    self.custom_delegate = TextOverDelegate()
    self.listWidget.setItemDelegate(self.custom_delegate)
    

  • Lifetime Qt Champion

    @RaisinBread22 said in Overlaying text on top of QIcon in QListWidget in Pyside2:

    style = option.widget

    why do you assign widget to style? style has to be an instance of QStyle.


  • Lifetime Qt Champion

    @jsulm
    Hi
    Maybe he meant

    if(option.widget):
    style = option.widget.style()
    else:
    style = QApplication.style()

    aka use widget style / use global style



  • On top of the above, you forgot to translate the first line: QStyledItemDelegate::paint(painter,option,index);. should be something like super(TextOverDelegate,self,painter,option,index).paint(painter,option,index)



  • @VRonin

    Terrific, after making minor corrections I got text to display in the center of the Qicon! All I have left to do are 3 things.

    1. What method can I call on a QListWidgetItem to easily change the text to something different? Do I just call item.setData(QtCore.Qt.UserRole, "New text goes here") again?
    2. What method can I call on a QListWidgetItem to easily disable the text?
    3. How do I make the text overlaying the QIcon red(it defaults to black) and change the font size?

    Here's the corrected(working) subclass for reference:

    class TextOverDelegate(QStyledItemDelegate):
        def __init__(self, parent=None):
            super(TextOverDelegate, self).__init__(parent)
    
        def paint(self, painter, option, index):
            super(TextOverDelegate,self).paint(painter,option,index)
            text = index.data(QtCore.Qt.UserRole)
            if(option.widget):
                style = option.widget.style()
            else:
                style = QApplication.style()
            style.drawItemText(painter, option.rect,QtCore.Qt.AlignCenter, option.palette, option.state & QStyle.State_Enabled, text)
    

    Here's what it currently produces after creating the QListWidgetItem with item = QtWidgets.QListWidgetItem(QtGui.QIcon(path), None) and calling item.setData(QtCore.Qt.UserRole, "Test Qicon text") before finally calling self.listWidget.addItem(item)

    alt text


  • Lifetime Qt Champion



  • Do I just call item.setData(QtCore.Qt.UserRole, "New text goes here") again?

    Correct

    What method can I call on a QListWidgetItem to easily disable the text?

    before text = index.data(QtCore.Qt.UserRole) add

    if(index.data(QtCore.Qt.UserRole+1)):
        return
    

    Now you can use item.setData(QtCore.Qt.UserRole+1,true) to disable the text and item.setData(QtCore.Qt.UserRole+1,false) to enable it again

    How do I make the text overlaying the QIcon red(it defaults to black) and change the font size?

    replace style.drawItemText(painter, option.rect,QtCore.Qt.AlignCenter, option.palette, option.state & QStyle.State_Enabled, text) with (using, C++ here, sorry)

    painter->save();
    QPen pen = painter->pen();
    pen.setColor(Qt::red); // color
    painter->setPen(pen);
    QFont fnt = painter->font();
    fnt.setPointSize(12); // font size
    painter->setFont(fnt);
    style->drawItemText(painter, option.rect, Qt::AlignCenter, option.palette, option.state & QStyle::State_Enabled, text.toString());
    painter->restore();
    

Log in to reply