【Qt】QSlider 再来一个圆形滑块

最新推荐文章于 2025-05-20 18:15:00 发布

原创最新推荐文章于 2025-05-20 18:15:00 发布 · 6.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#qt

本文详细介绍了如何使用QSS为QSlider组件定制样式，包括水平和垂直滑块的groove、handle及sub-page和add-page部分的样式定义。

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

QSlider::groove:horizontal,QSlider::add-page:horizontal{
height:3px;
border-radius:3px;
background:#18181a;
}


QSlider::sub-page:horizontal{
height:8px;
border-radius:3px;
background:#008aff;
}


QSlider::handle:horizontal{
width:12px;
margin-top:-5px;
margin-bottom:-4px;
border-radius:6px;
background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #565656,stop:0.8 #565656);
bacder-image:url(./res/images/live/GOUGOU.png)
}


QSlider::groove:vertical,QSlider::sub-page:vertical{
width:8px;
border-radius:3px;
background:#D8D8D8;
}


QSlider::add-page:vertical{
width:8px;
border-radius:3px;
background:#008aff;
}


QSlider::handle:vertical{
height:12px;
margin-left:-5px;
margin-right:-4px;
border-radius:6px;
background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #565656,stop:0.8 #565656);
bacder-image:url(./res/images/live/GOUGOU.png)
}

效果如图：
这里写图片描述