在悬停和按下时更改 QPushButton 图标
Change QPushButton Icon on hover and pressed
我试图在悬停和按下时更改 QpushButton 的图标,我正在使用带有样式表的 QtDesigner。
我试过了
QpushButton{
qproperty-icon:url(:/images/start.png);
}
QPushButton:hover
{
qproperty-icon:url(:/images/start_hov.png);
}
但是没用。
I tried setting it from QtDesigner Menu
但效果不佳。
不幸的是,它是对该错误的评论中的 bug of Qt which is still not fixed. There's a workaround suggestion,基本上你可以使用空 qproperty-icon
并在实际更改 [=14= 时保留它所必需的 space ] 属性 改为:
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);
还有宾果游戏 - 悬停时按钮的图标会发生变化!
我在设计器中制作的,来自 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);
在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);}");
阅读本文后遇到类似问题。这是我在 C++ 中的工作,不使用设计师的样式 sheet。
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 字符串中使用 * 运算符或 "Universal Selector" 之前,我无法使上述代码正常工作。
我知道这是一个老问题,但我认为它可能仍然有用。
为了获得默认仅显示图像的按钮,然后在悬停时显示不同的图像,我尝试在编辑器中设置一个图标并使用 onSelected
、onActive
、等,但自然,它没有用。
工作的灵感来自@JosephFarrish 和@goerge,因此功劳首先归功于他们。我决定 post 我的答案作为 'tangible' 解决方案。
对于特定的按钮,我有 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
文件夹名称相同。
注意 CSS 我设置了 QPushButton 的宽度和高度。
我认为值得一提的是,截至发布此答案时,已批准答案中提到的错误似乎已得到修复。我的按钮有以下样式表宏。这使得按钮图标在悬停并按下时正确更改。
#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"));
希望这对您有所帮助!
我试图在悬停和按下时更改 QpushButton 的图标,我正在使用带有样式表的 QtDesigner。 我试过了
QpushButton{
qproperty-icon:url(:/images/start.png);
}
QPushButton:hover
{
qproperty-icon:url(:/images/start_hov.png);
}
但是没用。
I tried setting it from QtDesigner Menu 但效果不佳。
不幸的是,它是对该错误的评论中的 bug of Qt which is still not fixed. There's a workaround suggestion,基本上你可以使用空 qproperty-icon
并在实际更改 [=14= 时保留它所必需的 space ] 属性 改为:
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);
还有宾果游戏 - 悬停时按钮的图标会发生变化!
我在设计器中制作的,来自 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);
在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);}");
阅读本文后遇到类似问题。这是我在 C++ 中的工作,不使用设计师的样式 sheet。
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 字符串中使用 * 运算符或 "Universal Selector" 之前,我无法使上述代码正常工作。
我知道这是一个老问题,但我认为它可能仍然有用。
为了获得默认仅显示图像的按钮,然后在悬停时显示不同的图像,我尝试在编辑器中设置一个图标并使用 onSelected
、onActive
、等,但自然,它没有用。
工作的灵感来自@JosephFarrish 和@goerge,因此功劳首先归功于他们。我决定 post 我的答案作为 'tangible' 解决方案。
对于特定的按钮,我有 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
文件夹名称相同。
注意 CSS 我设置了 QPushButton 的宽度和高度。
我认为值得一提的是,截至发布此答案时,已批准答案中提到的错误似乎已得到修复。我的按钮有以下样式表宏。这使得按钮图标在悬停并按下时正确更改。
#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"));
希望这对您有所帮助!