如何将悬停过渡添加到QPushButton? [英] How to add a hover transition to QPushButton?

问题描述

我尝试使用样式表创建自定义QPushButton.当我们将鼠标悬停在按钮上时，我想自定义按钮的颜色.它有效，但是我想设置一个过渡持续时间. 但是在Qt中，此选项不可用.

I try to make a custom QPushButton with a stylesheet. I want to custom color of button when we mouse over it. It works, but I want to put a transition duration. But in Qt this option is not available.

这是我的自定义按钮:

#include "bouton.h"

Bouton::Bouton(QString title, QWidget *parent) : QPushButton()
{
  setGeometry(50,50,120,40);
  setText(title);
  setMinimumHeight(30);
  setParent(parent);
  setStyleSheet(" QPushButton {"
              "border-radius: 5px; "
              "border: 1.5px solid rgb(91,231,255); "
              "background-color: white; }"
              "QPushButton:pressed {"
              "border: 1.4px solid rgb(73,186,205); }"
              "QPushButton:hover {"
              "font-size: 16px;"
              "transition: 0.9s; }");
}

参数过渡0.9s"无效.

The argument "transition 0.9s" doesn't work.

这是CSS中的示例.

还有其他方法吗?

推荐答案

原因

QSS 不是 CSS .没有过渡属性. 此处是所有可用属性的列表.

Cause

QSS is not CSS. There is no transition property. Here is a list of all available properties.

建议您不要使用样式表，而是采取另一种方法，该方法虽然更长，但是却具有更大的灵活性.解决方法如下:

Instead of using stylesheets, I would suggest you to take another path, which is longer, but gives you more flexibility. Here is the solution:

1. 创建QPushButton的子类，例如AnimatedHoverButton

获取有关QEvent::HoverEnter和QEvent::HoverLeave 事件的通知通过重新实现QPushButton::event

Get notified about QEvent::HoverEnter and QEvent::HoverLeave events by reimplementing QPushButton::event

bool AnimatedHoverButton::event(QEvent *event)
{
    switch (event->type()) {
    case QEvent::HoverEnter:
        animateHover(true);
        break;
    case QEvent::HoverLeave:
        animateHover(false);
        break;
    }

    return QPushButton::event(event);
}

使用 QVariantAnimation创建in和out过渡

Create the in and out transition by using QVariantAnimation

void AnimatedHoverButton::animateHover(bool in)
{
    const QColor &baseColor(palette().brush(QPalette::Button).color());
    const QColor &highlightColor(palette().brush(QPalette::Highlight).color());
    QColor startValue(in ? baseColor : highlightColor);

    if (m_transition) {
        startValue = m_transition->currentValue().value<QColor>();
        m_transition->stop();
    }

    m_transition = new QVariantAnimation(this);

    m_transition->setStartValue(startValue);
    m_transition->setEndValue(in ? highlightColor : baseColor);
    m_transition->setDuration(m_duration);

    connect(m_transition, &QVariantAnimation::valueChanged, [this](const QVariant &value){
        m_currentColor = value.value<QColor>();
        repaint();
    });

    connect(m_transition, &QVariantAnimation::destroyed, [this](){
        m_transition = nullptr;
    });

    m_transition->start(QAbstractAnimation::DeleteWhenStopped);
}

通过重新实现QPushButton::paintEvent事件处理程序并考虑动画的当前值来绘制按钮

Paint the button by reimplementing the QPushButton::paintEvent event handler and taking into account the current value of the animation

void AnimatedHoverButton::paintEvent(QPaintEvent * /*event*/)
{
    QStylePainter painter(this);
    QStyleOptionButton option;
    QPalette p(palette());

    initStyleOption(&option);

    p.setBrush(QPalette::Button, m_currentColor);

    option.palette = p;
    option.state |= QStyle::State_MouseOver;

    painter.drawControl(QStyle::CE_PushButton, option);
}

注意:该解决方案使用小部件的调色板设置动画的开始值和结束值.

Note: This solution uses the widget's palette to set the start and end values of the animation.

该解决方案可能看起来很复杂，但是幸运的是，我为您准备了一个有效的示例，说明如何实现和使用AnimatedHoverButton类.

The solution might seem complicated, but fortunatelly I have prepared a working example for you of how to implement and use the AnimatedHoverButton class.

以下代码片段使用AnimatedHoverButton类生成结果，类似于您提供的 CSS 示例:

The following code fragment uses the AnimatedHoverButton class to produce a result, similar to the CSS example you have provided:

auto *button = new AnimatedHoverButton(tr("Hover Over Me"), this);

QPalette p(button->palette());

p.setBrush(QPalette::Button, QColor("#F89778"));
p.setBrush(QPalette::ButtonText, QColor("#FFFFFF"));
p.setBrush(QPalette::Highlight, QColor("#F4511E"));

button->setPalette(p);
button->setTransitionDuration(300);

setCentralWidget(button);
setContentsMargins(10, 10, 10, 10);

该示例的完整代码可在 GitHub 上找到.

The full code of the example is available on GitHub.

给定的示例将产生以下结果:

The given example produces the following result:

这篇关于如何将悬停过渡添加到QPushButton?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！