如何向 QPushButton 添加悬停过渡?

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

这是我的自定义按钮:

#include "bouton.h"Bouton::Bouton(QString title, QWidget *parent) : QPushButton(){设置几何(50,50,120,40)；设置文本(标题)；设置最小高度(30)；设置父母(父母)；setStyleSheet("QPushButton {"边框半径:5px；"边框:1.5px 纯色 rgb(91,231,255)；"背景颜色:白色；}"QPushButton:按下{"边框:1.4px 纯色 rgb(73,186,205)；}"QPushButton:悬停{"字体大小:16px；"过渡:0.9s；}")；}

过渡 0.9s"的说法不起作用.

这是一个

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.

Here is my custom button:

#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; }");
}

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

Here is an example in CSS.

Are there other ways to do this?

解决方案

UPDATE

For some reason the proposed solution does not work as expected on Windows 10. I have updated the answer using painter.setOpacity(0.25); and painter.fillRect(rect(), m_currentColor); as a workaround. The code in the GitHub repository is updated as well.

---

Cause

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

Solution

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. Create a subclass of QPushButton, e.g. AnimatedHoverButton

2. 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;
            default:
                break;
        }
   
        return QPushButton::event(event);
    }
   

3. Create the in and out transition by using QVariantAnimation

    void AnimatedHoverButton::animateHover(bool in)
    {
        if (m_transition)
            m_transition->stop();
   
        m_transition = new QVariantAnimation(this);
        m_transition->setDuration(m_duration);
        m_transition->setStartValue(m_currentColor);
        m_transition->setEndValue(in ? palette().highlight().color()
                                     : Qt::transparent);
   
        connect(m_transition, &QVariantAnimation::valueChanged,
                this, [this](const QVariant &value){
            m_currentColor = value.value<QColor>();
            repaint();
        });
   
        connect(m_transition, &QVariantAnimation::destroyed,
                this, [this](){
            m_transition = nullptr;
            repaint();
        });
   
        m_transition->start(QAbstractAnimation::DeleteWhenStopped);
    }
   

4. 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;
   
        initStyleOption(&option);
   
        option.state &= ~QStyle::State_MouseOver;
   
        painter.drawControl(QStyle::CE_PushButton, option);
        painter.setOpacity(0.25);
        painter.fillRect(rect(), m_currentColor);
    }
   

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

Example

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

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

#include <QApplication>
#include "AnimatedHoverButton.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    AnimatedHoverButton button(QObject::tr("Hover Over Me"));

    button.setTransitionDuration(300);
    button.resize(300, 150);
    button.show();

    return a.exec();
}

The full code of the example is available on GitHub.

Result

The given example produces the following result: