QT开发之QSlider控件

最新推荐文章于 2025-05-02 14:46:56 发布

原创最新推荐文章于 2025-05-02 14:46:56 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

QT控件专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用Qt样式表自定义滑块控件的外观，包括边框、背景颜色、圆角等属性，提供了四种不同风格的滑块样式代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加方式：

在UI中右键点击滑块控件，选择改变样式表，添加下面代码就可以了

1、

QSlider{border:none; background-color:transparent;border-radius: 8px; }    

QSlider::handle:horizontal {   
               background: transparent;
               border: none;
               width: 12px;
               height: 6px; 
               border-radius: 3px;
                }    
QSlider::groove:horizontal{
                 background-color:#ffffff;   
                 border-radius: 8px; 
                }                            
QSlider::sub-page:horizontal {
                border-radius :3px;
                background-color:blue;
                }

2、

QSlider::groove:horizontal {
        height: 6px;
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
        width: 1px;
        background: rgb(0, 160, 230);
        margin: -6px 0px -6px 0px;
        border-radius: 9px;
}

3、

QSlider::groove:horizontal {
	border:2px solid #999999;
	height:20px;
	background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
	margin:2px 0;
}


QSlider::handle:horizontal {
	background:qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
	border:2px solid #5C5C5C;
	border-radius:5px;
	width:18px;
	
	
	margin:-2px 0;
}

4、

QSlider::handle:horizontal{width:24px;background-color:rgb(255,255,255);margin:-11px 0px -11px 0px;border-radius:12px;}
                             QSlider::groove:horizontal{height:2px;background-color:rgb(219,219,219);}
                             QSlider::add-page:horizontal{background-color:rgb(219,219,219);}
                             QSlider::sub-page:horizontal{background-color:rgb(26,217,110);}