0

How can I add customized items to a QListWidget with a background color that I choose, and add a bottom border to each item, like this draft example in the picture below.

This is the code that I wrote:

from PyQt5 import QtWidgets, QtGui
import sys


class CustomListHead(QtWidgets.QWidget):
    def __init__(self):
        super(CustomListHead, self).__init__()
        self.project_title = QtWidgets.QLabel("Today")
        self.set_ui()

    def set_ui(self):
        grid_box = QtWidgets.QGridLayout()
        grid_box.addWidget(self.project_title, 0, 0)

        self.setLayout(grid_box)
        self.show()


class CustomListItem(QtWidgets.QWidget):
    def __init__(self):
        super(CustomListItem, self).__init__()
        self.project_title = QtWidgets.QLabel("Learn Python")
        self.task_title = QtWidgets.QLabel("Learn more about forms, models and include")
        self.set_ui()

    def set_ui(self):
        grid_box = QtWidgets.QGridLayout()

        grid_box.addWidget(self.project_title, 0, 0)
        grid_box.addWidget(self.task_title, 1, 0)

        self.setLayout(grid_box)
        self.show()


class MainWindowUI(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindowUI, self).__init__()
        self.list_widget = QtWidgets.QListWidget()
        self.set_ui()

    def set_ui(self):
        custom_head_item = CustomListHead()

        item = QtWidgets.QListWidgetItem(self.list_widget)
        item.setSizeHint(custom_head_item.sizeHint())

        self.list_widget.setItemWidget(item, custom_head_item)
        self.list_widget.addItem(item)

        custom_item = CustomListItem()
        item = QtWidgets.QListWidgetItem(self.list_widget)
        item.setSizeHint(custom_item.sizeHint())

        self.list_widget.addItem(item)
        self.list_widget.setItemWidget(item, custom_item)

        vertical_layout = QtWidgets.QVBoxLayout()
        vertical_layout.addWidget(self.list_widget)

        widget = QtWidgets.QWidget()
        widget.setLayout(vertical_layout)
        self.setCentralWidget(widget)
        self.show()


app = QtWidgets.QApplication(sys.argv)
ui = MainWindowUI()
sys.exit(app.exec_())

example

ekhumoro
  • 115,249
  • 20
  • 229
  • 336
Oussama He
  • 555
  • 1
  • 10
  • 31

1 Answers1

0

I see you have QListWidgetItem with you.

From documentation you can customize each widget item, customize it and add to your listwidget:

The appearance of the text can be customized with setFont(), setForeground(), and setBackground(). Text in list items can be aligned using the setTextAlignment() function. Tooltips, status tips and "What's This?" help can be added to list items with setToolTip(), setStatusTip(), an d setWhatsThis().

http://doc.qt.io/qt-5/qlistwidgetitem.html#details

Pavan Chandaka
  • 11,671
  • 5
  • 26
  • 34
  • when i set stylesheet to QListWidget and than set background color to item, this last one dosen't work. – Oussama He Oct 06 '16 at 06:28
  • Set the background color in style sheet itself. listWidget->setStyleSheet( "QListWidget::item {" "border-style: solid;" "border-width:1px;" "border-color:black;" "background-color: green;" "}" – Pavan Chandaka Oct 06 '16 at 16:28
  • it doesn't work, this is what I did: self.list_widget.setStyleSheet(""" QListWidget::item { border-style: solid; border-width:1px; border-color:black; background-color: green; } """) than I add a color background to the first item like this: item.setBackground(QtGui.QColor(255, 255, 100)) the result that I got is: all items in green color (that sets in stylesheet). – Oussama He Oct 07 '16 at 16:09
  • I am missing something the. Could you please refer below link? It may help you a bit. http://stackoverflow.com/questions/36018010/how-to-change-remove-selection-active-color-of-qlistwidget – Pavan Chandaka Oct 07 '16 at 16:47
  • I read the question and answers in the link that you told me about and try to use delegate, but still can't do what I want. – Oussama He Oct 09 '16 at 09:28