其他分享
首页 > 其他分享> > QT改变滑动条的显示样式

QT改变滑动条的显示样式

作者:互联网

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

效果图:

完整代码:

 1 ui->hsPosition->setStyleSheet(tr("QSlider::groove:horizontal{ \
 2                                                                 border-radius:5px;\
 3                                                                 height:10px;\
 4                                                                 left:5px;\
 5                                                                 right:5px;\
 6                                                                 border-image:url(:/slider_bg.png);\
 7                                                                 }\
 8                                       QSlider::handle:horizontal{\
 9                                                           border-radius:10px;\
10                                                           width:20px;\
11                                                           height:20px;\
12                                                           margin-top:-5px;\
13                                                           margin-bottom:-5px;\
14                                                           margin-right:-5px;\
15                                                           margin-left:-5px;\
16                                                           border-image:url(:/5.png);\
17                                                           }\
18                                       QSlider::sub-page:horizontal{border-radius:5px;border-image:url(:/slider.png);}"));

代码单步分析

1 QSlider::groove:horizontal{ \                      //groove代表未划过的、horizontal代表横向条与之对应的是纵向vercital
2                            border-radius:5px;\             //圆角化
3                            height:10px;\                //设定高度
4                            left:5px;\                  //设定左边界
5                            right:5px;\                 //设定右边界
6                            border-image:url(:/slider_bg.png);\  //设置显示的图片
7                           }\                 
 1 QSlider::handle:horizontal{\                  //handle代表滑动块
 2                            border-radius:10px;\      //圆角化
 3                            width:20px;\           //设置宽度
 4                            height:20px;\           //设置高度
 5                            margin-top:-5px;\        //设置页面顶边距
 6                            margin-bottom:-5px;\      //设置页面底边距
 7                            margin-right:-5px;\       //设置页面右边距
 8                            margin-left:-5px;\       //设置页面左边距
 9                            border-image:url(:/5.png);\  //设置显示的图片
10                           }\   
1 QSlider::sub-page:horizontal{\                       //sub-page代表已经划过的区域
2                              border-radius:5px;\            //圆角化
3                              border-image:url(:/slider.png);}"));   //设置显示的图片

 

标签:QT,样式,border,image,radius,5px,滑动,horizontal,margin
来源: https://www.cnblogs.com/zswd-hwj/p/12394356.html