Как в таблице стиля PyQt5 прописать путь к изображению для стрелок, которые расположены по краям полос прокрутки?(Python3)

Question

Пытался сделать таблицу стиля для виджета QScrollArea. Заметил, что можно изменить внешний вид стрелок, которые находятся по краям полос прокрутки. Для этого нужно прописать путь к нужным изображениям. Я видел пример, но к сожалению, плохо пониманию, как он устроен: border-image: url(./images/right_arrow.png);. Предполагаю, что ./images - это папка в текущей папке, но, когда прописал таким образом путь к изображению, которое лежит в моей текущей папке, ничего не получилось: border-image: url(./picture1.png);. Пожалуйста, подскажите, как правильно указать путь к стрелкам на краях полос прокрутки? Какой оптимальный размер нужно выбирать для изображения, которое в дальнейшем должно стать такой стрелкой? Можно ли удалить эти стрелки с полос прокрутки? Мой код:

from PyQt5 import QtCore, QtWidgets, QtGui

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

        scrollArea = QtWidgets.QScrollArea()
        scrollArea.setStyleSheet('''QScrollArea {
                                        border-style: hidden;
                                        border-image: url(./picture1.png);
                                    }''') # <----------------------
        content_widget = QtWidgets.QWidget()
        scrollArea.setWidget(content_widget)
        scrollArea.setWidgetResizable(True)
        self.box1 = QtWidgets.QGridLayout(content_widget)        

        self.button = QtWidgets.QPushButton('Button')

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

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

        self.box.addWidget(self.button)
        self.setLayout(self.box)

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

Answer 1

Для наглядности я создал ДВА виджета QScrollArea и применил к ним разные таблицы стилей.

Обратите внимание, что для scrollArea_2 я дал имя объекта 'scrollArea_2'

scrollArea_2.setObjectName('scrollArea_2')

которое использую во второй таблице стилей именно для этого объекта

#scrollArea_2 QScrollBar:horizontal {...}

Примеры таблиц стилей Qt и др. смотрим:

https://doc.qt.io/archives/qt-4.8/stylesheet-examples.html#customizing-qscrollbar

https://doc.qt.io/qt-5/stylesheet-syntax.html

https://doc.qt.io/qt-5/stylesheet-reference.html

from PyQt5 import QtCore, QtWidgets, QtGui

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

        scrollArea = QtWidgets.QScrollArea()

        # скрыть горизонтальную полосу прокрутки
        scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)   # +++

        content_widget = QtWidgets.QWidget()
        scrollArea.setWidget(content_widget)
        scrollArea.setWidgetResizable(True)
        self.box1 = QtWidgets.QGridLayout(content_widget)        

        self.button = QtWidgets.QPushButton('Button')

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

# ++ vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
        scrollArea_2 = QtWidgets.QScrollArea()
        scrollArea_2.setObjectName('scrollArea_2')                              # +++
        content_widget = QtWidgets.QWidget()
        scrollArea_2.setWidget(content_widget)
        scrollArea_2.setWidgetResizable(True)
        self.box1 = QtWidgets.QGridLayout(content_widget)        

        self.button = QtWidgets.QPushButton('Button')

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

#++ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^    

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

        self.box.addWidget(scrollArea_2)

        self.box.addWidget(self.button)
        self.setLayout(self.box)


Stylesheet = ("""
QScrollBar:vertical {              
    border: none;
    background: white;
    width: 3px;               
    margin: 0px 0px 0px 0px;
}
QScrollBar::handle:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));
    min-height: 0px;
}
QScrollBar::add-line:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
    stop: 0  rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));
    height: 0 px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}


/* ------------------------  scrollArea_2  QScrollBar  -------------------------------
vvvvvvvvvvvvv                                                                        */
#scrollArea_2 QScrollBar:horizontal {
    height: 15px;
    margin: 3px 15px 3px 15px;
    border: 1px transparent #2A2929;
    border-radius: 4px;
    background-color: yellow;    
}
#scrollArea_2 QScrollBar::handle:horizontal {
    background-color: blue;      
    min-width: 5px;
    border-radius: 4px;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal {
    background: none;
}
#scrollArea_2 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}
#scrollArea_2 QScrollBar:vertical {
    background-color: #2A2929;
    width: 15px;
    margin: 15px 3px 15px 3px;
    border: 1px transparent #2A2929;
    border-radius: 4px;
}
#scrollArea_2 QScrollBar::handle:vertical {
    background-color: red;         
    min-height: 5px;
    border-radius: 4px;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 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;
}
#scrollArea_2 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    background: none;
}
#scrollArea_2 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_())