Qt控件滑块QSlider的图片使用注意事项

1.在设计器中拖动QSlider到界面上,编辑滑块的qss样式,将Qt助手Qt Style Sheets Examples中QSlider样式代码粘贴到输入框:

QScrollBar:horizontal {
      border: 2px solid green;
      background: cyan;
      height: 15px;
      margin: 0px 40px 0 0px;
  }

  QScrollBar::handle:horizontal {
      background: gray;
      min-width: 20px;
  }

2.要对QSlider的滑槽groove和把柄handle进行修改,对上面代码进行更改将滑块的槽和把柄换成图片,代码如下所示:

QSlider::groove:horizontal {
      /*border: 1px solid #999999;*/
      height:28px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
      /*background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);*/
	  /*background-image: url(:/images/sliderbackground.png);*//*注意:此属性会挤压handle图片导致高度不能调整*/
image: url(:/images/sliderbackground.png);
      margin: 2px 0;
  }

  QSlider::handle:horizontal {
     /* background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);*/
	image: url(:/images/sliderhandle.png);
      /*border: 1px solid #5c5c5c;*/
      width: 28px;
      margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
      /*border-radius: 3px;*/
  }

3.千万注意,QSlider::groove:horizontal要替换图片,不能用background-image属性,只能用image属性,不然会挤压QSlider::handle:horizontal的图片导致高度不能调整(宽度能调整)。

4.参考文献 《Qt助手·Qt Style Sheets Examples》

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值