Как установить таблицу стилей для QScrollBar в QScrollArea?

Question

Я не могу понять, как настроить таблицу стилей для изменения QScrollBar в QScrollArea.

Я впервые попробовал:

scrollarea = QScrollArea()
scrollarea.verticalScrollBar().setStyleSheet("""
    QScrollBar:horizontal {
        min-width: 240px;
        height: 13px;
    }

    QScrollBar:vertical {
        min-height: 240px;
        width: 13px;
    }

    QScrollBar::groove {
        background: gray;
        border-radius: 5px;
    }

    QScrollBar::handle {
        background: blue;
        border-radius: 5px;
    }

    QScrollBar::handle:horizontal {
        width: 25px;
    }

    QScrollBar::handle:vertical {
        height: 25px;
    }"""
# same for horizontalScrollBar

Затем я попыталсяприменение точно такой же таблицы стилей непосредственно к экземпляру QScrollArea, но безуспешно.

Затем я попытался определить полосу прокрутки самостоятельно:

scrollArea = QScrollArea(self)
verticalScrollBar = QScrollBar(qt.Qt.Vertical, scrollArea)
verticalScrollBar.setStyleSheet(my_stylesheet)
scrollArea.setVerticalScrollBar(verticalScrollBar)

Но точно такая же таблица стилей работает на QSlider (заменив QScrollBar на QSlider).

Answer 1

Моя проблема заключалась в том, что таблицы стилей для QSlider и QScrollBar имеют слегка различающиеся синтаксисы.

Мое возможное решение - это (можно установить либо как таблицу стилей QScrollArea, либо как таблицу стилей QApplication)в зависимости от желаемого объема):

stylesheet = """
    QScrollArea {
        border: none;
    }

    QScrollBar {
        background: gray;
        border-radius: 5px;
    }

    QScrollBar:horizontal {
        height: 13px;
    }

    QScrollBar:vertical {
        width: 13px;
    }

    QScrollBar::handle {
        background: green;
        border-radius: 5px;
    }

    QScrollBar::handle:horizontal {
        height: 25px;
        min-width: 10px;
    }

    QScrollBar::handle:vertical {
        width: 25px;
        min-height: 10px;
    }

    QScrollBar::add-line {
        border: none;
        background: none;
    }

    QScrollBar::sub-line {
        border: none;
        background: none;
    }
    """

Answer 2

Попробуйте:

import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt

class MainWindow(QDialog):
    def __init__(self):
        super().__init__()
        self.createWidgets()

    def createWidgets(self):
        self.layout = QVBoxLayout(self)

        self.scrollbar1 = QScrollBar(Qt.Vertical, self)
        self.scrollbar2 = QScrollBar(Qt.Horizontal, self)

        for widget in [self.scrollbar1, self.scrollbar2]:
            widget.valueChanged.connect(self.test)
            self.layout.addWidget(widget)

    def test(self, event):
        print(self.sender().value())


stylesheet = """
 /* --------------------------------------- QScrollBar  -----------------------------------*/
 QScrollBar:horizontal
 {
     height: 15px;
     margin: 3px 15px 3px 15px;
     border: 1px transparent #2A2929;
     border-radius: 4px;
     background-color: yellow;    /* #2A2929; */
 }

 QScrollBar::handle:horizontal
 {
     background-color: blue;      /* #605F5F; */
     min-width: 5px;
     border-radius: 4px;
 }

 QScrollBar::add-line:horizontal
 {
     margin: 0px 3px 0px 3px;
     border-image: url(:/qss_icons/rc/right_arrow_disabled.png);
     width: 10px;
     height: 10px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal
 {
     margin: 0px 3px 0px 3px;
     border-image: url(:/qss_icons/rc/left_arrow_disabled.png);
     height: 10px;
     width: 10px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }

 QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
 {
     border-image: url(:/qss_icons/rc/right_arrow.png);
     height: 10px;
     width: 10px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }


 QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
 {
     border-image: url(:/qss_icons/rc/left_arrow.png);
     height: 10px;
     width: 10px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }

 QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
 {
     background: none;
 }


 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
 {
     background: none;
 }

 QScrollBar:vertical
 {
     background-color: #2A2929;
     width: 15px;
     margin: 15px 3px 15px 3px;
     border: 1px transparent #2A2929;
     border-radius: 4px;
 }

 QScrollBar::handle:vertical
 {
     background-color: red;         /* #605F5F; */
     min-height: 5px;
     border-radius: 4px;
 }

 QScrollBar::sub-line:vertical
 {
     margin: 3px 0px 3px 0px;
     border-image: url(:/qss_icons/rc/up_arrow_disabled.png);
     height: 10px;
     width: 10px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }

 QScrollBar::add-line:vertical
 {
     margin: 3px 0px 3px 0px;
     border-image: url(:/qss_icons/rc/down_arrow_disabled.png);
     height: 10px;
     width: 10px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
 {

     border-image: url(:/qss_icons/rc/up_arrow.png);
     height: 10px;
     width: 10px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }


 QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
 {
     border-image: url(:/qss_icons/rc/down_arrow.png);
     height: 10px;
     width: 10px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
 {
     background: none;
 }


 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
 {
     background: none;
 }
"""

if __name__ == '__main__':
    app = QApplication(sys.argv)
    app.setStyleSheet(stylesheet)       # <----
    GUI = MainWindow()
    GUI.resize(300, 200)
    GUI.show()
    sys.exit(app.exec_())

---

Обновление

Загрузка изображений изфайл ресурсов.Таким способом можно преобразовать файл res.qrc в файл res_rc.py через файл pyrcc5, который можно напрямую загрузить с помощью импорта.

В каталоге, например, images, были помещены изображения: right_arrow.png, ...

Создан такой файл, как stylesheet.qrc:

 <RCC>
 <qresource prefix="/">
     <file>images/down_arrow.png</file>
     <file>images/down_arrow_disabled.png</file>
     <file>images/up_arrow.png</file>
     <file>images/up_arrow_disabled.png</file>
     <file>images/left_arrow.png</file>
     <file>images/left_arrow_disabled.png</file>
     <file>images/right_arrow.png</file>
     <file>images/right_arrow_disabled.png</file>
 </qresource>
 </RCC>

Преобразовать файл stylesheet.qrc в stylesheet_rc.py pyrcc5 stylesheet.qrc -o stylesheet_rc.py

Вставить в main.py - import stylesheet_rc

Перенесите модули main.py и stylesheet_rc.py в другой каталог и запустите main.py

main.py

import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt

import stylesheet_rc                                       # <--------                           

class MainWindow(QDialog):
    def __init__(self):
        super().__init__()
        self.createWidgets()

    def createWidgets(self):
        self.layout = QVBoxLayout(self)

        self.scrollbar1 = QScrollBar(Qt.Vertical, self)
        self.scrollbar2 = QScrollBar(Qt.Horizontal, self)

        for widget in [self.scrollbar1, self.scrollbar2]:
            widget.valueChanged.connect(self.test)
            self.layout.addWidget(widget)

    def test(self, event):
        print(self.sender().value())


stylesheet = """
 /* --------------------------------------- QScrollBar  -----------------------------------*/
 QScrollBar:horizontal
 {
     height: 15px;
     margin: 3px 15px 3px 15px;
     border: 1px transparent #2A2929;
     border-radius: 4px;
     background-color: yellow;    /* #2A2929; */
 }

 QScrollBar::handle:horizontal
 {
     background-color: blue;      /* #605F5F; */
     min-width: 5px;
     border-radius: 4px;
 }

 QScrollBar::add-line:horizontal
 {
     margin: 0px 3px 0px 3px;
     border-image: url(:/images/right_arrow_disabled.png);       /* # <-------- */
     width: 10px;
     height: 10px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal
 {
     margin: 0px 3px 0px 3px;
     border-image: url(:/images/left_arrow_disabled.png);        /* # <-------- */ 
     height: 10px;
     width: 10px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }

 QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
 {
     border-image: url(:/images/right_arrow.png);               /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }


 QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
 {
     border-image: url(:/images/left_arrow.png);               /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }

 QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
 {
     background: none;
 }


 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
 {
     background: none;
 }

 QScrollBar:vertical
 {
     background-color: #2A2929;
     width: 15px;
     margin: 15px 3px 15px 3px;
     border: 1px transparent #2A2929;
     border-radius: 4px;
 }

 QScrollBar::handle:vertical
 {
     background-color: red;         /* #605F5F; */
     min-height: 5px;
     border-radius: 4px;
 }

 QScrollBar::sub-line:vertical
 {
     margin: 3px 0px 3px 0px;
     border-image: url(:/images/up_arrow_disabled.png);        /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }

 QScrollBar::add-line:vertical
 {
     margin: 3px 0px 3px 0px;
     border-image: url(:/images/down_arrow_disabled.png);       /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
 {

     border-image: url(:/images/up_arrow.png);                  /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }


 QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
 {
     border-image: url(:/images/down_arrow.png);                /* # <-------- */
     height: 10px;
     width: 10px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
 {
     background: none;
 }


 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
 {
     background: none;
 }
"""

if __name__ == '__main__':
    app = QApplication(sys.argv)
    app.setStyleSheet(stylesheet)       # <----
    GUI = MainWindow()
    GUI.resize(300, 200)
    GUI.show()
    sys.exit(app.exec_())