Qt-QSlider样式

最新推荐文章于 2026-05-01 09:56:48 发布

原创最新推荐文章于 2026-05-01 09:56:48 发布 · 2k 阅读

22 ·

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

GEO检测

标签

#qslider

本文详细介绍了如何使用QSS代码定制Qt中的QSlider外观，包括滑动槽、未滑动槽和滑块的不同状态样式，以及如何调整边缘、颜色和尺寸以创建美观的滑动控件。

文章目录

QSlider

The slider is the classic widget for controlling a bounded value.
 It lets the user move a slider handle along a horizontal or vertical groove and translates the handle's position into an integer value within the legal range.
滑块是用于控制有界值的经典小部件。
它允许用户沿着水平或垂直凹槽移动滑块手柄，并将手柄的位置转换为合法范围内的整数值。

QSS 代码

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/6d53a06a42f94baeab2dbe5ebd12d49c.pn
可以设置各种各样好看的QSlider，这些离不开样式设置。

QSS设置样式代码如下：

/*horizontal ：水平QSlider*/
QSlider::groove:horizontal {
border: 0px solid #bbb;
}

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

/*2.未滑动过的槽设计参数*/
QSlider::add-page:horizontal {
/*槽颜色*/
background: rgb(255,255, 255);
/*外环大小0px就是不显示，默认也是0*/
border: 0px solid #777;
/*外环区域倒圆角度*/
border-radius: 6px;
 /*上遮住区域高度*/
margin-top: 9px;
 /*下遮住区域高度*/
margin-bottom:9px;
}
 
/*3.平时滑动的滑块设计参数*/
QSlider::handle:horizontal {
/*滑块颜色*/
background: rgb(193,204,208);
/*滑块的宽度*/
width: 5px;
/*滑块外环为1px，再加颜色*/
border: 1px solid rgb(193,204,208);
 /*滑块外环倒圆角度*/
border-radius: 2px; 
 /*上遮住区域高度*/
margin-top:6px;
 /*下遮住区域高度*/
margin-bottom:6px;
}

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

这里需要注意的是，如果设置groove槽左右两端有圆角，其实更应该要设置的是add-page, sub-page要有圆角。

QSlider 分析

QSlider 通常有如下三个部分构成
滑动过的槽；

QSlider::sub-page:horizontal

未滑动过槽；

QSlider::add-page:horizontal

滑块
1：正常滑动的滑块

QSlider::handle:horizontal

2: hover显示的滑块

QSlider::handle:horizontal:hover

图片表示
在这里插入图片描述
其下对应的qss样式如下

background: /背景（颜色）/
margin-top: /上区域（遮住高度）/
margin-bottom: /下区域（遮住高度）
border: /外围环（颜色，厚度）/
border-radius: /外围环圆角角度/
width: /宽度（滑环有效）（滑槽设置无效）/

参考博客