两种QSlider进度条的QSS样式

最新推荐文章于 2024-08-08 15:43:01 发布

阳光柠檬_

最新推荐文章于 2024-08-08 15:43:01 发布

阅读量2.2w

点赞数 14

分类专栏： QT C++ 文章标签： QSS QSlider

本文链接：https://blog.csdn.net/liukang325/article/details/44850927

版权

QT C++ 专栏收录该内容

99 篇文章 13 订阅

订阅专栏

1. 横的进度条：

musicSlider->setStyleSheet("  \
     QSlider::add-page:Horizontal\
     {     \
        background-color: rgb(87, 97, 106);\
        height:4px;\
     }\
     QSlider::sub-page:Horizontal \
    {\
        background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(231,80,229, 255), stop:1 rgba(7,208,255, 255));\
        height:4px;\
     }\
    QSlider::groove:Horizontal \
    {\
        background:transparent;\
        height:6px;\
    }\
    QSlider::handle:Horizontal \
    {\
        height: 30px;\
        width:8px;\
        border-image: url(:/images/ic_music_thumb.png);\
        margin: -8 0px; \
    }\
    ");

由于采用样式，原始的拖动滑块消失，采用ic_music_thumb.png来当拖动滑块。

<- - ic_music_thumb.png

2. 竖的进度条，有底色。圆形滑块。

volumeSlider->setStyleSheet("  \
    QSlider\
    {\
        background-color: rgb(25, 38, 58);\
        min-width:5px;\
        max-width:5px;\
        border:15px solid rgb(25, 38, 58);\
    }\
     QSlider::add-page:vertical\
     {     \
        background-color: rgb(37, 168, 198);\
        width:4px;\
     }\
     QSlider::sub-page:vertical \
    {\
        background-color: rgb(87, 97, 106);\
        width:4px;\
     }\
    QSlider::groove:vertical \
    {\
        background:transparent;\
        width:6px;\
    }\
    QSlider::handle:vertical \
    {\
         height: 13px;\
        width:13px;\
        border-image: url(:/images/ic_volume_thumb.png);\
         margin: -0 -4px; \
     }\
    ");