QSS定制自定义QSlider



QSlider中有四个比较重要的辅助控制器(subcontrol),groove表示槽的部分,handle表示滑块,add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要和slider对象的方向一致,如果slider是vertical的,QSS设定的是horizontal的,那么是看不到效果的。

进行QSlider设计时,groovy的左右一定要留有一定的空间,这样是防止滑块滑到两端时被遮盖,所以groovy需要设置left和right属性。
    "QSlider::groove:horizontal                       "
     "{                                               "
    "   border: 10px solid #999999;                   "
    "   height: 5px;                                  "
    "   margin: 0px 0;                                "
    "   left: 12px; right: 12px;                      "
    "   border-image:url(:/file/images/process.png);  "
    " }                                               "

滑块方面,如果设计的是突出的滑块,需要指定margin或者border为负值进行外扩即可。
    "QSlider::handle:horizontal                       "
    "{                                                "
    "   border: 1px solid #5c5c5c;                    "
    "   border-image:url(:/file/images/pd.png);       "
    "   width: 18px;                                  "
    "   margin: -7px -7px -7px -7px;                  "
    " }                                               "

 m_slider->setStyleSheet(
    "QSlider::groove:horizontal                       "
    "{                                                "
    "   border-image:url(:/file/images/process.png);  "
    "   border: 10px;                                 "
    "   height: 5px;                                  "
    "   margin: 0px;                                  "
    "   left: 18px; right: 18px;                      "
    " }                                               "
    "QSlider::handle:horizontal                       "
    "{                                                "
    "   border-image:url(:/file/images/pd.png);       "
    "   border: 1px;                                  "
    "   width: 18px;                                  "
    "   margin: -7px -7px -7px -7px;                  "
    " }                                               "
    );

=========================================================================================================================
(以下是别人的例子)
已滑过的槽部分直接填充颜色即可,没有必要贴图,如果需要立体的效果可以通过线性渐变进行填充,线性渐变通过起始点和终止点的坐标指定的是填充方向,通过stop指定当前rgba值,起始点值为0,终止点值为1,,示例的效果是凸起,依靠强悍的美工给我的图,层层萃取出来的rgb值,填上后才呈现出来的。(执着的程序员呀)

"QSlider::sub-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255));                      "
"}                                                           "

就这样,一个完美的QSlider就出现了!各位可以根据自己的实际情况进行修改。

完整的代码:
slider->setStyleSheet(
"QSlider::groove:horizontal {                                "
"     border: 1px solid #999999;                             "
"     height: 2px;                                           "
"     margin: 0px 0;                                         "
"     left: 12px; right: 12px;                               "
" }                                                          "
"QSlider::handle:horizontal {                                "
"     border: 1px solid #5c5c5c;                             "
" border-image:url(image/skin2/Toolsicon/volumnslider.png);"
"     width: 18px;                                           "
"     margin: -7px -7px -7px -7px;                           "
" }                                                          "
"                                                            "
"QSlider::sub-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255));                      "
"}                                                           "
"QSlider::add-page:horizontal{                               "
" background-image:url(image/skin2/Toolsicon/volumn.png)   "
"}"
);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值