qt - 在悬停并按下时更改 QPushButton 图标

Question

我试图在悬停并按下时更改 QpushButton 的图标，我正在使用带有样式表的 QtDesigner。我试过这个

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

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

但它不起作用。

我尝试从 QtDesigner 菜单设置它， 但效果不佳。

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

我知道这是一个老问题，但我认为它可能仍然有用。

为了获得一个默认只显示图像的按钮，然后在悬停时显示不同的图像，我尝试在编辑器中设置一个图标并使用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 5

在 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 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"));

希望这会有所帮助！