【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss

最新推荐文章于 2026-04-23 16:50:20 发布

原创最新推荐文章于 2026-04-23 16:50:20 发布 · 1.9k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #开发语言 #QSlider #qss

QT入门专栏收录该内容

49 篇文章

订阅专栏

本文介绍了如何在Qt中使用QSlider创建自定义控件，包括水平和竖直QSlider的样式设计，以及如何通过QSS样式表进行美化，同时提供了代码示例和逻辑实现要点。

往期回顾：

【QT入门】 Qt自定义控件与样式设计之QCheckBox qss实现按钮开关-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QPushButton点击按钮弹出菜单-CSDN博客

【QT入门】Qt自定义控件与样式设计之QProgressBar用法及qss-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss

一、两种样式

1、水平的QSlider

2、竖直的Qslider

二、qss设计

1、水平qss设计

QSlider
{
 background-color: #363636; 
 border-style: outset; 
 border-radius: 10px; 
}
 
QSlider::groove:horizontal
{
 height: 12px;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
 margin: 2px 0
}
 
QSlider::handle:horizontal 
{
 background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);
 width: 16px;
 height: 16px;
 margin: -5px 6px -5px 6px;
 border-radius:11px; 
 border: 3px solid #ffffff;
}

2、竖直qss设计

QSlider 
{
 background-color: rgba(22, 22, 22, 0.7);
 padding-top: 15px;  /*上面端点离顶部的距离*/
 padding-bottom: 15px;
 border-radius: 5px; /*外边框矩形倒角*/
}
 
QSlider::add-page:vertical 
{
 background-color: #FF7826;
 width:5px;
 border-radius: 2px;
}
 
QSlider::sub-page:vertical 
{
 background-color: #7A7B79;
 width:5px;
 border-radius: 2px;
}
 
QSlider::groove:vertical 
{
 background:transparent;
 width:6px;
}
 
QSlider::handle:vertical    
{
 height: 14px;  
 width: 14px;
 margin: 0px -4px 0px -4px;
 border-radius: 7px;
 background: white;
}

groove表示选择滑块的轨道部分

background-color没有包含中间的凹槽线，只有周围的区域

三、逻辑实现

QSlider作为一个简单的小部件，重点就在样式，需要搞明白每个样式含义，还有就是创建qss.h专门放样式表的头文件，要熟悉string xxx = R"()"，原始字符串字面值这个用法，在widget类用的时候别忘了加头文件。
转换成QString要用QString::fromStdString

{
    ui->setupUi(this);

    ui->hSlider->setStyleSheet(QString::fromStdString(hQSlider_qss));
}

以上就是QSlider用法实现滑动条的基本示例。

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！