Overlaying text on top of QIcon in QListWidget in Pyside2

[RaisinBread22]

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:

[dheerendra]

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.

[RaisinBread22]

@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!

[dheerendra]

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.

[JonB]

@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...?

[SGaist]

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.

[VRonin]

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

[RaisinBread22]

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

[jsulm]

@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.

[mrjj]

@jsulm
Hi
Maybe he meant

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

aka use widget style / use global style

[VRonin]

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)

[RaisinBread22]

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

[jsulm]

@RaisinBread22

1. http://doc.qt.io/qt-5/qlistwidgetitem.html#setText
2. What do you mean by "disable the text"?
3. Qt style sheets: http://doc.qt.io/qt-5/stylesheet-examples.html

[VRonin]

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