在Qt中使用CSS自定義向下箭頭按鈕

我們正在開發一個C++窗體的觸摸屏Qt應用程序，它需要一個寬向下箭頭圖形圖像以及一個自定義背景。我一直在嘗試使用QSS來實現某些功能，但迄今爲止已被擊敗。在Qt中使用CSS自定義向下箭頭按鈕

我發現得到一個寬按鈕（一個大於16個像素）的唯一方式是使用負邊距：

QComboBox { 
    min-height:63px; 
    max-height:63px; 
    margin-right:47px; 
    border-image:url(Resources/ComboBox_Center1.png); 
    font-family: "Franklin Gothic Medium"; 
    font-size: 22px; 
} 
QComboBox::drop-down { 
    width:47px; 
    border:0px; 
    margin:0px; 
    margin-right:-47px; 
} 
QComboBox::down-arrow { 
    image:url(Resources/ComboBox_Right1.png); 
}

這使按鈕在正確的位置，使輸入區域的正確大小，但是然後向下箭頭只打開組合框，不打開然後關閉。

所有其他選項任一輸入區域延伸到區域（空白，邊框）或收縮整個控制。

設置背景圖片標籤都沒有效果 - 只有邊界圖像顯示圖像。

注意，邊界圖像（或背景色）總是顯示出來，即使下面的箭頭。

是否有某種方式來只是樣式組合框的輸入部分？看起來組合的部分應該有它自己的子選擇器，但我沒有看到它。

來源

2011-11-08 danielweberdlc

嘗試......

QComboBox { 
    min-height:63px; 
    max-height:63px; 
    font-family: "Franklin Gothic Medium"; 
    font-size: 22px; 
    padding: 1px 1px 1px 1px; 
} 
QComboBox::drop-down { 
    width: 47px; 
    border: 0px; 
} 

QComboBox::down-arrow { 
    image: url(Resources/ComboBox_Right1.png); 
    width: 42px; 
    height: 42px; 
}

注：寬度和高度上的向下箭頭圖像將取決於您所使用的圖像上。這些爲我的形象工作。

大約有樣式表的一些奇怪的事情 - 和很多隱藏的技巧。花費幾分鐘的時間來完成this可能是值得的，它描述了樣式表工作原理背後的基本原理。它們看起來很容易，但即使在使用它們一段時間之後，我也經常回到示例和文檔。

背景圖像是其中一件不明顯的事情。這是我直接從文檔中取得的內容。在大多數情況下，當爲背景設置圖像時，我們真正想要的是設置邊框圖像。我假設你沒有看到「背景圖像」的原因是組合框是一個「複雜」的小工具 - 意味着它是由其他幾個人組成 - 並且背景隱藏在它們後面。

這是常見的嘗試background-image屬性，但是這有一個一些缺點：比如，後臺會經常出現隱藏按鈕裝飾的背後，因爲它不被視爲一個背景。另外，如果按鈕被調整大小，則整個背景將被拉伸或平鋪，這並不總是看起來好。最好使用border-image屬性，因爲它始終會顯示圖像，無論背景如何（如果它具有alpha值，則可以將其與背景相結合），並且它具有特殊的設置以處理與按鈕大小調整。

至於造型的輸入區域...假設您的QComboBox是可編輯的，輸入區域只是一個QLineEdit。所以你總是可以分配一個樣式表到行編輯這種方式

comboBox->lineEdit()->setStyleSheet(your style sheet);

我希望有所幫助。

來源

2011-11-08 02:08:53 Liz

我試過這個樣式表，組合框顯示正確，不幸的是它仍然有點擊向下按鈕只會展開組合框的行爲。通常，第一次點擊會打開它，第二次點擊會關閉它。這是與Qt 4.7.4。 – danielweberdlc

是的，我知道，我用原始樣式表複製了這個問題。但對我來說，我沒有這樣的問題。我也使用Qt 4.7.4。您是按原樣使用我的樣式表，還是您做了任何更改？ – Liz

我們的項目最終爲QML傾銷了表單+ CSS，所以我猜這個問題在這個時候是沒有意義的。 – danielweberdlc

在Qt中使用CSS自定義向下箭頭按鈕

回答

相關問題