Как красиво настроить выпадающий список с помощью css?

Question

Подскажите пожалуйста вот у меня есть поле ввода с выпадающим списком, как его можно настраивать с помощью css, например я хочу увеличить расстояние между итемами, размер шрифта в выпадающем списке, колесико прокрутки, как это можно реализовать?

import sys
from PyQt5.QtWidgets import QApplication, QLineEdit, QCompleter, QWidget, QVBoxLayout
from PyQt5.QtCore import Qt


class Test(QWidget):
    def __init__(self, parent=None):
        super(Test, self).__init__(parent)
        self.resize(400, 400)
        a = ['вырезка свиная', 'гречка', 'морковь', 'лук', 'масло растительное', 'масло сливочное',
             'голень куриная без кожи', 'овощи', 'филе куриное', 'фасоль стручковая',
             'перец болгарский', 'мука', 'рис', 'яйца', 'манка', 'хлеб бородино',
             'творог', 'овощи секрет хозяйки', 'кукуруза', 'котлеты лососевые',
             'сыр легкий', 'филе вареное', 'лопатка свиная', 'картофель', 'помидор', 'горошек']

        self.text = QLineEdit()
        self.com = QCompleter(a)
        self.com.setFilterMode(Qt.MatchContains)

        self.text.setCompleter(self.com)

        self.vbox = QVBoxLayout()
        self.vbox.addWidget(self.text)
        self.setLayout(self.vbox)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Test()

    win.show()
    sys.exit(app.exec_())

Answer 1

Тут нашел подсказку о настройке стилей QCompleter. У QCompleter есть метод popup, что возвращает виджет от QAbstractItemView, если вывести print(self.com.popup()), то окажется, что эти виджет QListView. Значит, нужно можно стиль для popup и для QAbstractItemView (т.к. базовый) и для его потомков, типа QListView

Тут есть примеры стилей: https://doc.qt.io/archives/qt-5.6/stylesheet-examples.html#customizing-qtableview

Но стили не работали для элементов. Поиск подсказал, что popup нужно установить QStyledItemDelegate (импортировать из QStyledItemDelegate), а для ползунка нужно настраивать стили для QScrollBar:

        self.com.popup().setItemDelegate(QStyledItemDelegate(self))
        self.com.popup().setStyleSheet("""
        QAbstractItemView {
            background: black;
            font: 20px;
        }
        
        QAbstractItemView::item {
            padding-bottom: 30px;
            color: darkCyan;
        }
        
        QScrollBar:vertical {
            background-color: green;
            width: 35px;
            border-radius: 4px;
        }
        """)

Весь код:

import sys
from PyQt5.QtWidgets import QApplication, QLineEdit, QCompleter, QWidget, QVBoxLayout, QStyledItemDelegate
from PyQt5.QtCore import Qt


class Test(QWidget):
    def __init__(self, parent=None):
        super(Test, self).__init__(parent)
        self.resize(400, 400)
        a = ['вырезка свиная', 'гречка', 'морковь', 'лук', 'масло растительное', 'масло сливочное',
             'голень куриная без кожи', 'овощи', 'филе куриное', 'фасоль стручковая',
             'перец болгарский', 'мука', 'рис', 'яйца', 'манка', 'хлеб бородино',
             'творог', 'овощи секрет хозяйки', 'кукуруза', 'котлеты лососевые',
             'сыр легкий', 'филе вареное', 'лопатка свиная', 'картофель', 'помидор', 'горошек']

        self.text = QLineEdit()
        self.com = QCompleter(a)
        self.com.setFilterMode(Qt.MatchContains)
        self.com.popup().setItemDelegate(QStyledItemDelegate(self))
        self.com.popup().setStyleSheet("""
        QAbstractItemView {
            background: black;
            font: 20px;
        }
        
        QAbstractItemView::item {
            padding-bottom: 30px;
            color: darkCyan;
        }
        
        QScrollBar:vertical {
            background-color: green;
            width: 35px;
            border-radius: 4px;
        }
        """)

        self.text.setCompleter(self.com)

        self.vbox = QVBoxLayout()
        self.vbox.addWidget(self.text)
        self.setLayout(self.vbox)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Test()

    win.show()
    sys.exit(app.exec_())

Результат:

БЛОГ НА HUSL

Как красиво настроить выпадающий список с помощью css?

Ответы (1 шт):