如何在QSlider的两侧添加图像

Question

我使用Stylesheets重新设计并实现了QSlider。

我找不到如何在滑块本身之前和之后（左或右，顶部或底部）放置图像。

例如：

滑块：

----00---------------

左图：

qqqqq

右图：

ddddd

结果：

qqqqq----00---------------ddddd

我目前正在使用QHBoxLayout并使用QLabel插入这些图像，但它似乎不是正确或最好的方式。

我怎样才能正确添加这些图像？

谢谢！

Answer 1

滑块的三个“正文部分”是groove，add-page和sub-page。所有这些实际上都在QSlider的范围内，因此样式会为您提供类似the one in this blog post的效果。使用样式表会给你效果：

qqqq00ddddddddddddddd    

而不是

qqqqq----00---------------ddddd

您可以通过简单地坚持QHBoxLayout策略来实现。

Answer 2

实际上，您只需使用样式表和border-image子控件上的groove属性即可实现此目的。

例如，使用这样的边框图像：

为了更好地了解其中的内容，B为10像素宽，空间为2，A为12像素宽。

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px solid transparent;
   border-right: 12px solid transparent;
}
QSlider::handle {
    width: 8px;
    background-color: green;
}

这可以满足您的期望：

但这个解决方案有一个小问题。鼠标忽略边框的存在，并且在手柄位置和鼠标位置之间的两端附近存在偏移。 因此，为了避免这种情况，手柄必须一直向两侧移动，但我们为它添加了一个透明边框，使其看起来像在图像边界之前停止：

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px;
   border-right: 12px;
}
QSlider::handle {
    width: 8px;
    /* add borders to the handle that will sit above the groove border */
    border-right: 10px solid transparent;
    border-left: 12px solid transparent;       

    /* negative margins to allow the handle borders 
       to go past the groove borders */
    margin-right: -10px;    
    margin-left: -12px;
    background-color: green;
    /* make the background color fill the content, not the border */
    background-clip: content;
}