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