QSlider 设置样式

workingwei

于 2024-08-08 15:43:01 发布

阅读量234

点赞数 1

分类专栏： Qt 文章标签： qt

本文链接：https://blog.csdn.net/qq_43287931/article/details/141028770

版权

Qt 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 简介

QSlider是Qt框架中的一个控件，用于实现滑动条的功能。滑动条是用户界面中的常用控件之一，可以通过拖动滑块来选择一个值，或者通过点击滑条上的位置来快速定位。

2. 设置样式

    ui->horizontalSlider->setStyleSheet(
                                        "QSlider::groove:horizontal {"
                                        "border: 0px solid #bbb;"
                                        "}"

//                                        /*1.滑动过的槽设计参数*/
                                       " QSlider::sub-page:horizontal {"
//                                         /*槽颜色*/
                                        "background: rgb(29, 167, 223);"
//                                         /*外环区域倒圆角度*/
                                        "border-radius: 4px;"
//                                         /*上遮住区域高度*/
                                        "margin-top:8px;"
//                                         /*下遮住区域高度*/
                                        "margin-bottom:8px;"
//                                        /*width在这里无效，不写即可*/

                                        "border: 2px solid rgb(29, 167, 223);"
                                        "}"

//                                        /*2.未滑动过的槽设计参数*/
                                        "QSlider::add-page:horizontal {"
//                                        /*槽颜色*/
                                        "background: rgb(255,255,255);"
//                                        /*外环大小0px就是不显示，默认也是0*/
                                        "border: 0px solid #777;"
//                                        /*外环区域倒圆角度*/
                                        "border-radius: 4px;"
//                                         /*上遮住区域高度*/
                                        "margin-top:9px;"
//                                         /*下遮住区域高度*/
                                        "margin-bottom:9px;"
                                        "}"

//                                        /*3.平时滑动的滑块设计参数*/
                                        "QSlider::handle:horizontal {"
//                                        /*滑块颜色*/
                                        "background: rgb(29, 167, 223);"
//                                        /*滑块的宽度*/
                                        "width: 2px;"
//                                        /*滑块外环为1px，再加颜色*/
                                        "border: 2px solid rgb(29, 167, 223);"
//                                         /*滑块外环倒圆角度*/
                                        "border-radius: 2px; "
//                                         /*上遮住区域高度*/
                                       " margin-top:2px;"
//                                         /*下遮住区域高度*/
                                        "margin-bottom:2px;"
                                        "}"

//                                        /*4.手动拉动时显示的滑块设计参数*/
                                        "QSlider::handle:horizontal:hover {"
//                                        /*滑块颜色*/
                                        "background: rgb(184,0,0);"
//                                        /*滑块的宽度*/
                                        "width:2px;"
//                                        /*滑块外环为1px，再加颜色*/
                                        "border: 2px solid rgb(184,18,18);"
//                                         /*滑块外环倒圆角度*/
                                        "border-radius: 2px; "
//                                         /*上遮住区域高度*/
                                       " margin-top:2px;"
//                                         /*下遮住区域高度*/
                                        "margin-bottom:2px;"
                                        "}"
                                        );