CODEWITHSUNDEEP
pythonqtpyqt
alphanumeric
alphanumeric

Reputation: 19349

How to draw border around QListWidgetItem

The code below creates a QListWidget with QListWidgetItem assigned a thumb image.

enter image description here

I would appreciate if you show how to make a color border around of the QListWidgetItem

Here is the Photoshoped image showing a concept:

enter image description here

from PyQt4 import QtGui, QtCore
import sys, os

class MyClassItem(QtGui.QListWidgetItem):
    def __init__(self, parent=None):
        super(QtGui.QListWidgetItem, self).__init__(parent)       


class ThumbListWidget(QtGui.QListWidget):
    def __init__(self, type, parent=None):
        super(ThumbListWidget, self).__init__(parent)
        self.setIconSize(QtCore.QSize(64, 64))

class Dialog_01(QtGui.QMainWindow):
    def __init__(self):
        super(QtGui.QMainWindow,self).__init__()
        self.listItems={}

        myQWidget = QtGui.QWidget()
        myBoxLayout = QtGui.QVBoxLayout()
        myQWidget.setLayout(myBoxLayout)
        self.setCentralWidget(myQWidget)

        self.listWidgetA = ThumbListWidget(self)

        for i in range(7):
            listItemAInstance=MyClassItem()
            name='A'+'%04d'%i
            listItemAInstance.setText(name)
            listItemAInstance.setBackgroundColor(QtCore.Qt.darkGray)   
            if i%2: listItemAInstance.setBackgroundColor(QtCore.Qt.gray)

            icon=self.getIcon(name)
            listItemAInstance.setIcon( icon ) 

            self.listWidgetA.addItem(listItemAInstance) 

            listItemBInstance=MyClassItem()
            name='B'+'%04d'%i
            listItemBInstance.setText(name)
            icon=self.getIcon(name)
            listItemBInstance.setIcon( icon )

        myBoxLayout.addWidget(self.listWidgetA)      

    def getIcon(self, name):
        thumbpath=os.path.expanduser("~")+'/thumbs/' +name+'/'+name+'.jpg'
        if not thumbpath: return
        if not os.path.exists(os.path.dirname(thumbpath)):
            os.makedirs(os.path.dirname(thumbpath))

        img = QtGui.QImage(64, 64, QtGui.QImage.Format_RGB32)
        img.fill(QtGui.QColor(96,96,96))     

        painter = QtGui.QPainter(img)
        font = painter.font()
        font.setBold(True)
        font.setPointSize(18)     

        painter.setPen(QtGui.QColor('black'))
        painter.setFont(font)
        painter.drawText(img.rect(), QtCore.Qt.AlignCenter, name)
        painter.end()
        img.save(thumbpath, 'JPG')

        icon = QtGui.QIcon( thumbpath )
        pixmap = icon.pixmap(64, 64)
        icon = QtGui.QIcon(pixmap)
        return icon

if __name__ == '__main__':
    app = QtGui.QApplication(sys.argv)
    dialog_1 = Dialog_01()
    dialog_1.show()
    dialog_1.resize(720,480)
    sys.exit(app.exec_())

Upvotes: 3

Views: 8261

Answers (1)

Bo Milanovich
Bo Milanovich

Reputation: 8203

Every class that derives from QWidget supports CSS styling. What you could do is something such as:

lwi = QListWidget()
lwi.setStyleSheet("QListWidget::item { border: 0px solid red }")

For more info, see http://qt-project.org/doc/qt-4.8/qwidget.html#styleSheet-prop

You can also style your entire application, but apply a certain part of styling only to QListWidgetItem by putting it as a prefix.

C++ example I found:

app.setStyleSheet("QListWidget { background: red; } QListWidget::item { background: yellow; } QListWidget::item:selected { background: blue; }");

Upvotes: 7

Related Questions