如何在QSlider的側面添加圖像

我已使用其樣式表重新設計並實施了QSlider。如何在QSlider的側面添加圖像

我找不到如何在滑塊本身前後（左側或右側，頂部或底部）放置圖像。

例：

滑塊：

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

圖片左：

qqqqq

圖片右：

ddddd

結果：

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

我目前使用QHBoxLayout並使用QLabels插入這些圖像，但它似乎不是正確的或最佳的方式。

我怎樣才能正確地添加這些圖像？

謝謝！

來源

2012-12-29 Phil

能否請您提供一些ASCII藝術展示結果應該如何？像'---- qqqqq00ddddd ---------------'？ – doc

你好@doc。我已經完成了。這是第3行「結果：」基本上：Image_A +滑塊本身+ Image_B。 – Phil

使用'QHBoxLayout'是最乾淨和最簡單的。你爲什麼認爲這不是正確的方式？ –

實際上，您只能使用樣式表和groove子控件上的border-image屬性來實現此目的。

例如，像這樣的邊界圖像：

Slider decoration image

爲了更好地看到什麼去哪裏，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; 
}

它給你什麼，你希望：

resulting slider

這個方案有一個小問題，但。鼠標忽略邊框的存在，並且在手柄位置和鼠標位置之間的兩端附近存在偏移。所以，爲了避免這種情況，手柄具有一路去到任何一方，但我們增加了一個透明的邊框給它，使它看起來像它只是圖像邊界之前停止：

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

來源

2012-12-30 16:51:58 alexisdm

這太棒了。謝謝@alexisdm！一個簡單的問題，但。這是否也適用於HTML和CSS3或者這是否令人敬畏Qt特定？我從來沒有見過這個。 – Phil

@Phil你應該至少可以用WebKit瀏覽器（safari，chrome和QtWebKit）來做同樣的事情：[jsfiddle example]（http://jsfiddle.net/Qd3vv/）。 IE不支持邊框圖像，而FF不支持滑塊（html5輸入範圍）。 – alexisdm

alexisdm，這真的是很好的有用的信息。再次感謝。歡呼聲;-) – Phil

滑塊的三個「主體部分」是groove,add-page和sub-page。所有這些實際上都在QSlider的範圍內，所以造型給你帶來的效果如the one in this blog post。使用樣式表會給你造成的影響：

qqqq00ddddddddddddddd

代替

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

，你可以通過簡單地用你的QHBoxLayout戰略堅持實現。

來源

2012-12-30 01:53:31

如何在QSlider的側面添加圖像

回答

相關問題