文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在QScrollBar中为QScrollArea设置样式表？

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

Stack Overflow用户
提问于 2019-02-08 15:49:28
回答 2查看 10.5K关注 0票数 2

我不知道如何设置样式表来修改QScrollBar中的QScrollArea。

我第一次尝试：

代码语言：javascript
复制
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实例，但没有成功。

然后我尝试自己定义滚动条：

代码语言：javascript
复制
scrollArea = QScrollArea(self)
verticalScrollBar = QScrollBar(qt.Qt.Vertical, scrollArea)
verticalScrollBar.setStyleSheet(my_stylesheet)
scrollArea.setVerticalScrollBar(verticalScrollBar)

但是，完全相同的样式表适用于QSlider (通过用QSlider替换QScrollBar )。

pyqt
qtstylesheets
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-08 16:52:09

试一试：

代码语言：javascript
复制
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文件转换为pyrcc5文件。

例如，在一个目录中，images放置了图像：right_arrow.png, ...

创建了像stylesheet.qrc这样的文件

代码语言：javascript
复制
 <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

代码语言：javascript
复制
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_())

​

​

票数 6
EN

Stack Overflow用户

发布于 2019-02-18 13:43:07

我的问题是，QSlider和QScrollBar的样式表有不同的语法。

我的最终解决方案是(根据所需的范围，将其设置为QScrollArea样式表或QApplication样式表)：

代码语言：javascript
复制
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;
    }
    """
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54595957

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档