QT改变滑动条的显示样式

可以通过修改控件的样式表来达到显示自定义的滑动条。

效果图：

完整代码：

ui->hsPosition->setStyleSheet(tr("QSlider::groove:horizontal{ \
                                                                border-radius:5px;\
                                                                height:10px;\
                                                                left:5px;\
                                                                right:5px;\
                                                                border-image:url(:/slider_bg.png);\
                                                                }\
                                      QSlider::handle:horizontal{\
                                                          border-radius:10px;\
                                                          width:20px;\
                                                          height:20px;\
                                                          margin-top:-5px;\
                                                          margin-bottom:-5px;\
                                                          margin-right:-5px;\
                                                          margin-left:-5px;\
                                                          border-image:url(:/5.png);\
                                                          }\
                                      QSlider::sub-page:horizontal{border-radius:5px;border-image:url(:/slider.png);}"));

代码单步分析

QSlider::groove:horizontal{ \　　　　　　　　　　　　　　　　　　　　　　//groove代表未划过的、horizontal代表横向条与之对应的是纵向vercital
                           border-radius:5px;\ 　　　　　　　　　　  //圆角化
                           height:10px;\　　　　 　　　　　　　　　　 //设定高度
                           left:5px;\　　　　　　 　　　　　　　　　　 //设定左边界
                           right:5px;\　　　　　　　　　　　　　　　　 //设定右边界
                           border-image:url(:/slider_bg.png);\　　//设置显示的图片
                          }\                 

QSlider::handle:horizontal{\　　　　　　　　　　　　　　　　　 //handle代表滑动块
                           border-radius:10px;\　　　　　　//圆角化
                           width:20px;\　　　　　　　　　　　//设置宽度
                           height:20px;\　　　　　　　　　　 //设置高度
                           margin-top:-5px;\　　　　　　　　//设置页面顶边距
                           margin-bottom:-5px;\　　　　　　//设置页面底边距
                           margin-right:-5px;\　　　　　　 //设置页面右边距
                           margin-left:-5px;\　　　　　　　//设置页面左边距
                           border-image:url(:/5.png);\　 //设置显示的图片
                          }\   

QSlider::sub-page:horizontal{\　　　　　　　　　　　　　　　　　　　　　　 //sub-page代表已经划过的区域
2                              border-radius:5px;\　　　　　　　　　　　　//圆角化
3                              border-image:url(:/slider.png);}"));   //设置显示的图片

 扩：https://blog.csdn.net/sinan1995/article/details/80080148