c++ - 如何在 QSlider 的侧面添加图像

Question

我使用它的样式表重新设计并实现了一个 QSlider。

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

前任：

滑块：

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

左图：

qqqqq

图片右：

ddddd

结果：

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

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

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

谢谢！

Answer 1

滑块的三个“主体部分”是groove、add-page和sub-page。所有这些实际上都在 的范围内QSlider，因此样式可以为您提供类似于此博客文章中的效果。使用样式表会给你以下效果：

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;
}