在懸停並按下時更改 QPushButton 圖標

Question

我試圖在懸停和按下時更改 QpushButton 的圖標，我正在使用 QtDesigner 和樣式表。 我試過這個

QpushButton{
       qproperty-icon:url(:/images/start.png);
}

QPushButton:hover
{
       qproperty-icon:url(:/images/start_hov.png);
}

但它不起作用。

我嘗試從 QtDesigner Menu 設置它，但效果不佳。

Answer 1

不幸的是，這是Qt 的一個錯誤，仍未修復。 該錯誤的評論中有一個解決方法建議，基本上您可以使用空的qproperty-icon並保留所需的空間，同時實際更改background-image屬性：

QPushButton {
    qproperty-icon: url(" "); /* empty image */
    qproperty-iconSize: 16px 16px; /* space for the background image */
    background-image: url(":/images/start.png");
    background-repeat: no-repeat;
}

QPushButton:hover {
    background-image: url(":/images/start_hov.png");
    background-repeat: no-repeat;
}

但最終的結果看起來……真的不是很令人滿意。 如果您在運行時使用 C++ 更改按鈕的圖標，您可以獲得更好的結果，這是一個使用事件過濾器的簡單示例：

#include <QObject>
#include <QPushButton>
#include <QEvent>

class ButtonHoverWatcher : public QObject
{
    Q_OBJECT
public:
    explicit ButtonHoverWatcher(QObject * parent = Q_NULLPTR);
    virtual bool eventFilter(QObject * watched, QEvent * event) Q_DECL_OVERRIDE;
};

ButtonHoverWatcher::ButtonHoverWatcher(QObject * parent) :
    QObject(parent)
{}

bool ButtonHoverWatcher::eventFilter(QObject * watched, QEvent * event)
{
    QPushButton * button = qobject_cast<QPushButton*>(watched);
    if (!button) {
        return false;
    }

    if (event->type() == QEvent::Enter) {
        // The push button is hovered by mouse
        button->setIcon(QIcon(":/images/start_hov.png"));
        return true;
    }

    if (event->type() == QEvent::Leave){
        // The push button is not hovered by mouse
        button->setIcon(QIcon(":/images/start.png"));
        return true;
    }

    return false;
}

然后在設置 UI 的代碼中的某處執行如下操作：

ButtonHoverWatcher * watcher = new ButtonHoverWatcher(this);
ui->pushButton->installEventFilter(watcher);

和賓果游戲 - 您可以在懸停和取消懸停時更改按鈕的圖標！

Answer 2

閱讀本文后遇到類似問題。 這是我在 C++ 中的工作，不使用設計師的樣式表。

1>我創建圖標，一個用於被按下，一個用於正常。 在您的情況下，我們會將其作為懸停條件處理。

2>將圖標添加到資源文件中。

3>使用以下代碼作為參考...

其中 Add_PB 是 QPushButton。

Add_PB->setStyleSheet( "*{border-image: url(:/icons/maximize.bmp);}"  
":pressed{ border-image: url(:/icons/maximize_pressed.bmp);}"); 

這里的關鍵是您可以使用 setStyleSheet 為不同的條件設置不同的圖標。 在我在 CSS 字符串中使用 * 運算符或“通用選擇器”之前，我無法使上述代碼工作。

參考： http : //doc.qt.io/qt-5/stylesheet-syntax.html

Answer 3

我在設計器中從 ui_...h 文件中創建了它：

QIcon icon;
icon.addFile(QStringLiteral(":/unpressed.png"), QSize(), QIcon::Normal, QIcon::Off);
icon.addFile(QStringLiteral(":/pressed.png"), QSize(), QIcon::Normal, QIcon::On);
pushButton->setIcon(icon);

Answer 4

在 c++ 中，我們可以使用以下代碼實現它：

ui->button->setStyleSheet("QPushButton{border-image : url(./default_Img.png);} QPushButton:hover{border-image : url(./hover_Img.png); }"
                               "QPushButton:focus{border-image : url(./focus_Img.png);}");

Answer 5

我知道這是一個老問題，但我認為它可能仍然有用。

要獲得默認情況下僅顯示圖像的按鈕，然后懸停時顯示不同的圖像，我嘗試在編輯器中設置一個圖標並使用onSelected 、 onActive等，但很自然地，它不起作用。

所做的工作受到@JosephFarrish 和@goerge 的啟發，因此首先歸功於他們。 我決定將我的答案作為“切實的”解決方案發布。

對於特定的按鈕，我有 2 張圖片：

• 默認顯示一個

• 並打開懸停效果

我對特定 QPushButton 的解決方案是：

QPushButton {
    border-image: url(:/icons/ic-explore);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

QPushButton:hover {
    border-image: url(:/icons/ic-explore-hover);
    background-repeat: no-repeat;
}

如您所見， ic-explore和ic-explore-hover已添加到我的資源文件中，如下所示：

實際圖標位於項目根文件夾中的一個名為 icons 的文件夾中。 圖標的前綴由:/icons/ ，這恰好與icons文件夾名稱相同。

請注意我設置 QPushButton 的寬度和高度的 CSS。

Answer 6

我認為值得一提的是，截至發布此答案時，已批准的答案中提到的錯誤似乎已得到修復。 我的按鈕有以下樣式表宏。 這使按鈕圖標在懸停並按下時正確更改。

#define BUTTON_STYLESHEET_TEMPLATE(not_pressed, hovered, pressed) "QPushButton {"\
"border-image: url(:icons/" not_pressed ");"\
"background-repeat: no-repeat;"\
"width: 65px;"\
"height: 56px;"\
"}"\
"QPushButton:hover {"\
"border-image: url(:icons/" hovered ");"\
"}"\
"QPushButton:pressed {"\
"border-image: url(:icons/" pressed ");"\
"}"

我使用 setStyleSheet 函數將其應用於我的每個 QPushButton，將每個狀態的三個不同圖像傳遞到宏中。

button.setStyleSheet(BUTTON_STYLESHEET_TEMPLATE("not_pressed.png", "hovered.png", "pressed.png"));

希望這會有所幫助！