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

尝试一下：

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_())

更新

从资源文件上传图像。这种方式是转换通过pyrcc5文件在res_rc.py文件中的res.qrc文件，可以通过导入直接加载。

在一个目录中，例如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_())

Answer 2

我的问题是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;
    }
    """

如何在QScrollArea中为QScrollBar设置样式表？

2 个答案: