Как кастомизировать QScrollBar определенным образом?

Question

Главный контейнер моего приложения box содержит 15 простых кнопок QPushButton и имеет вертикальную полосу прокрутки, визуальные характеристики которой мне нужно изменить.

Я видел таблицы стиля для QScrollBar, но так и не понял как устроены устроены эти объемные конструкции. Попытки переделать их под свои нужды всегда приводили к ошибке:

Could not parse stylesheet of object QScrollArea

Мне нужно, чтобы полоса удовлетворяла следующим параметрам:

Ширина полосы (на рисунке обозначена цифрой 2) должна быть 10px. Углы полосы должны быть скруглены.
Ширина заднего фона полосы (на рисунке обозначена цифрой 1) должна быть 10px. Углы заднего фона полосы должны быть скруглены.
Стрелки вверх/вниз на концах полосы (на рисунке обозначены цифрой 3) должны не иметь фона, рамок и прочих лишних элементов. Мне нужно, чтобы они представляли из себя простые круги диаметром 10px. Вот png-картинка такого круга:

Пожалуйста, скажите, как это сделать?

from PyQt5 import QtCore, QtWidgets, QtGui

class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        scrollArea = QtWidgets.QScrollArea()
        content_widget = QtWidgets.QWidget()
        scrollArea.setWidget(content_widget)
        scrollArea.setWidgetResizable(True)
        scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
        scrollArea.setStyleSheet(stylesheet)
        box1 = QtWidgets.QGridLayout(content_widget)

        for n in range(1, 15):
            btn = QtWidgets.QPushButton(f'Button{n}',
                                        clicked = lambda ch, n=n: print(f'Button{n}'))
            box1.addWidget(btn, n-1, 0)

        box = QtWidgets.QHBoxLayout(self)
        box.addWidget(scrollArea)

stylesheet = (''' border-style: hidden; ''') # Важно сохранить эту характеристику


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle(' ')
    window.show()
    sys.exit(app.exec_())

Answer 1

Если это то, что вам надо, то цвета отрегулируете самостоятельно. Если что-то не так, напишите - что не так.

from PyQt5 import QtCore, QtWidgets, QtGui

class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        scrollArea = QtWidgets.QScrollArea()
        scrollArea.setObjectName("scrollArea")                        # +
        content_widget = QtWidgets.QWidget()
        scrollArea.setStyleSheet("border-style: hidden;")             # Важно сохранить эту характеристику
        scrollArea.setWidget(content_widget)
        scrollArea.setWidgetResizable(True)
        scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
        
        box1 = QtWidgets.QGridLayout(content_widget)
        for n in range(1, 15):
            btn = QtWidgets.QPushButton(f'Button{n}',
                                        clicked = lambda ch, n=n: print(f'Button{n}'))
            box1.addWidget(btn, n-1, 0)

        box = QtWidgets.QHBoxLayout(self)
        box.addWidget(scrollArea)


Stylesheet = ("""
#scrollArea QScrollBar:vertical {
    background-color: #2A29ff;                  
    width: 10px;          
    margin: 15px 0px 15px 0px;                   
    border: 0px transparent #2A29ff;             
    border-radius: 5px;                          
}
#scrollArea QScrollBar::handle:vertical {
    background-color: red;         
    min-height: 10px;                            
    border-radius: 5px;                          
}
#scrollArea QScrollBar::sub-line:vertical {
    margin: 3px 0px 3px 0px;
    border-image: url(circle.png);                 /* (./images/up_arrow_disabled.png)  */      
    height: 10px;
    width: 10px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
#scrollArea QScrollBar::add-line:vertical {
    margin: 3px 0px 3px 0px;
    border-image: url(circle.png);                 /* (./images/down_arrow_disabled.png) */          
    height: 10px;
    width: 10px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
#scrollArea QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on {
    border-image: url(circle.png);                 /* (./images/up_arrow.png) */                   
    height: 10px;
    width: 10px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
#scrollArea QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on {
    border-image: url(circle.png);                 /* (./images/down_arrow.png) */                  
    height: 10px;
    width: 10px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
#scrollArea QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    background: none;
}
#scrollArea QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}
""")

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    
    app.setStyleSheet(Stylesheet)                                 # +++
    
    window = MyWindow()
    window.setWindowTitle(' ')
    window.show()
    sys.exit(app.exec_())

БЛОГ НА HUSL

Как кастомизировать QScrollBar определенным образом?

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