zhiyiYo / PyQt-Fluent-Widgets

A fluent design widgets library based on C++ Qt/PyQt/PySide. Make Qt Great Again.
https://qfluentwidgets.com
GNU General Public License v3.0
4.99k stars 464 forks source link

[Bug]: Change background of ListWidget item #869

Closed AmirMahdaviAM closed 1 month ago

AmirMahdaviAM commented 2 months ago

What happened?

how can i change item list background?

use setBackground but it will break all other visuals

item = QListWidgetItem(itemText)
setFont(item)
item.setBackground(QColor(255, 255, 255, 10))
self.taskList.addItem(item)

and then edited background color in qss file and apply it but background still unchanged (i know applied because of padding changed)

#taskList::item {
    background: rgba(255, 255, 255, 0.100);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

image

Operation System

Windows11 22h2

Python Version

3.10.6

PyQt/PySide Version

PyQt 5.15.9

PyQt/PySide-Fluent-Widgets Version

1.5.6

How to Reproduce?

ListWidget::item { background: rgba(255, 255, 255, 0.100); }

item.setBackground(QColor(255, 255, 255, 10))

Minimum code

self.taskList = ListWidget(self)
self.taskList.setObjectName("taskList")

item = QListWidgetItem(itemText)
setFont(item)
item.setBackground(QColor(255, 255, 255, 10))
self.taskList.addItem(item)
AlexZhu2001 commented 2 months ago

I don't think it's easy to do this in the current version. If you want to set background for widget item, you should inherit ListItemDelegate, rewrite _drawBackground or paint fuction. Here is an simple example:

# coding: utf-8
import sys

from PySide6.QtCore import *
from PySide6.QtGui import *
from PySide6.QtWidgets import *

from qfluentwidgets import *

class MyListItemDelegate(ListItemDelegate):
    def __init__(self, parent: QListView):
        super().__init__(parent)

    def _drawBackground(self, painter: QPainter, option: QStyleOptionViewItem, index: QModelIndex):
        painter.save()
        isHover = self.hoverRow == index.row()
        isPressed = self.pressedRow == index.row()
        if index.row() not in self.selectedRows:
            if isPressed:
                painter.setBrush(QColor(0x66, 0xcc, 0xff, 0xff))
            elif isHover:
                painter.setBrush(QColor(0x66, 0xcc, 0xff, 0x88))
            else:
                painter.setBrush(QColor(0x66, 0xcc, 0xff, 0x44))
        else:
            painter.setBrush(QColor(0x66, 0xcc, 0xff, 0xff))
        painter.drawRoundedRect(option.rect, 5, 5)
        painter.restore()

class Demo(QWidget):

    def __init__(self):
        super().__init__()
        # setTheme(Theme.DARK)

        self.hBoxLayout = QHBoxLayout(self)
        self.listWidget = ListWidget(self)
        self.listWidget.setItemDelegate(MyListItemDelegate(self.listWidget))
        # self.listWidget.setAlternatingRowColors(True)

        # self.listWidget.setSelectRightClickedRow(True)

        stands = [
            '白金之星', '绿色法皇', "天堂制造", "绯红之王",
            '银色战车', '疯狂钻石', "壮烈成仁", "败者食尘",
            "黑蚊子多", '杀手皇后', "金属制品", "石之自由",
            "砸瓦鲁多", '钢链手指', "臭氧宝宝", "华丽挚爱",
            "隐者之紫", "黄金体验", "虚无之王", "纸月之王",
            "骇人恶兽", "男子领域", "20世纪男孩", "牙 Act 4",
            "铁球破坏者", "性感手枪", 'D4C • 爱之列车', "天生完美",
            "软又湿", "佩斯利公园", "奇迹于你", "行走的心",
            "护霜旅行者", "十一月雨", "调情圣手", "片刻静候"
        ]
        for stand in stands:
            item = QListWidgetItem(stand)
            self.listWidget.addItem(item)

        self.setStyleSheet("Demo{background: rgb(249, 249, 249)} ")
        self.hBoxLayout.setContentsMargins(0, 0, 0, 0)
        self.hBoxLayout.addWidget(self.listWidget)
        self.resize(300, 400)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = Demo()
    w.show()
    app.exec()

But this example did not consider the dark theme, you can refer to the source code of TableItemDelegate to get more detail about how this package draw item background.

AmirMahdaviAM commented 1 month ago

thank you, worked like charm

class MyListItemDelegate(ListItemDelegate):

    def __init__(self, parent: QListView):
        super().__init__(parent)

    def _drawBackground(self, painter: QPainter, option: QStyleOptionViewItem, index: QModelIndex):
        painter.save()
        isHover = self.hoverRow == index.row()
        isPressed = self.pressedRow == index.row()

        if isDarkTheme():
            pressBrush = QColor(255, 255, 255, 10)
            hoverBrush = QColor(255, 255, 255, 15)
            otherBrush = QColor(255, 255, 255, 5)
        else:
            pressBrush = QColor(0, 0, 0, 15)
            hoverBrush = QColor(0, 0, 0, 30)
            otherBrush = QColor(0, 0, 0, 10)

        if index.row() not in self.selectedRows:
            if isPressed:
                painter.setBrush(pressBrush)
            elif isHover:
                painter.setBrush(hoverBrush)
            else:
                painter.setBrush(otherBrush)

        painter.drawRoundedRect(option.rect, 5, 5)
        painter.restore()

image