如何在QSlider中自定义手柄颜色?

时间:2019-01-17 08:53:14

标签: qt pyqt qtstylesheets

我无法弄清楚如何使用样式表自定义QSlider中的句柄。凹槽样式和手柄样式之间似乎有些干扰,我似乎无法弄清楚如何同时自定义两者。

这是我目前拥有的样式表:

stylesheet = """
    QLabel {
        font-family: Ubuntu-Regular;
        font-size: 12px;
        qproperty-alignment: AlignCenter;
        color: %s;
        background: %s;
        border: 1px solid %s;
        border-radius: 4px;
        min-height: 40px;
        max-height: 40px;
        min-width: 48px;
        max-width: 100px;
    }

    QSlider:horizontal {
        min-width: 240px;
        height: 13px;
    }        

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

    QSlider::groove {
        background: %s;
        border-radius: 5px;
    }  

    QSlider::handle {
        background: %s;
        border-radius: 5px;
    }        

    QSlider::handle:horizontal {
        min-width: 25px;
        min-height: 13px;
    }

    QSlider::handle:vertical {
        min-width: 13px;
        min-height: 25px;
    }
""" % (colors.gray_dark, colors.gray_light, colors.gray,
       colors.gray_light, colors.primary1)

预期结果:

expected

当前结果:

expected

请注意,句柄大小仅为1或2px。

2 个答案:

答案 0 :(得分:1)

尝试一下:

import sys
from PyQt5.QtWidgets import QWidget, QApplication, QHBoxLayout, QLabel, QSlider
from PyQt5.QtCore    import Qt                             


class MyStyle(QWidget):

    def __init__(self):
        super().__init__()

        label = QLabel("123")

        layout = QHBoxLayout(self)
        layout.addWidget(QSlider(Qt.Horizontal))
        layout.addWidget(label)


# style
CSS = """
QLabel {
    font-family: Ubuntu-Regular;
    font-size: 12px;
    qproperty-alignment: AlignCenter;
    color: yellow;
    background: #565a5e;
    border: 1px solid #565a5e;
    border-radius: 4px;
    min-height: 40px;
    max-height: 40px;
    min-width: 48px;
    max-width: 100px;
}
QSlider::groove:horizontal {
    border: 1px solid #565a5e;
    height: 10px;
    background: #eee;
    margin: 0px;
    border-radius: 4px;
}
QSlider::handle:horizontal {
    background: red;
    border: 1px solid #565a5e;
    width: 24px;
    height: 8px;
    border-radius: 4px;
}
"""

if __name__ == "__main__":
    app = QApplication(sys.argv)
    app.setStyleSheet(CSS)                         
    w = MyStyle()
    w.show()
    sys.exit(app.exec_())

Source

答案 1 :(得分:0)

简明答案:使用width中的heightmin-width而不是min-heightQSlider::handle

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

    QSlider::handle:vertical {
        height: 25px;
    }