主页 / 问题 / 1005062
Accepted
Kaznachei
Asked:2020-07-21 04:26:58 +0000 UTC2020-07-21 04:26:58 +0000 UTC

从一种颜色过渡到另一种颜色。QPushButton

  • 772

我们以 Google Chrome 浏览器为例。当我们将光标移到选项卡上时，您可以（微弱地）看到它是如何逐渐变灰的，当然很快，但很顺利，当我们移开光标时，它又变白了。如何在中实现大致相同的QPushButton（即，将鼠标悬停在按钮上时平滑过渡到不同的颜色，当我移开光标时反之亦然）Qt？大概是通过了setStyleSheet，不过我的CSS和HTML不强，只是上网浏览器而已。

qt

1 个回答

  1. Best Answer

    让我们定义一个继承ChromeButtom自QPushButton. background在内部，我们在宏中定义了一个新属性Q_PROPERTY，我们还为它指定了一个 setter 和一个 getter。该属性是类工作所必需的QPropertyAnimation，顾名思义，就是从一个属性值到另一个属性值或动画的平滑变化。

    class ChromeButtom : public QPushButton
{
    Q_OBJECT
    Q_PROPERTY(QColor background
               READ getBackground
               WRITE setBackground
               )
    QColor background;
    QPropertyAnimation anim;

public:
    explicit ChromeButtom(QWidget *parent = nullptr);
    ChromeButtom(const QString& text, QWidget *parent = nullptr);

    QColor getBackground() const;
    void setBackground(const QColor& back);

protected:
    void leaveEvent(QEvent *event);
    void enterEvent(QEvent *event);
};

    属性的 Setter 和 getter 实现background：

    QColor
ChromeButtom::
getBackground() const {
    return background;
}

void
ChromeButtom::
setBackground(const QColor &back) {
    background = back;
    //установка цвета фона через qss (таблица стилей qt)
    this->setStyleSheet(QString{"background-color: rgb(%1, %2, %3);"}.arg(back.red()).arg(back.green()).arg(back.blue()));
}

    将代码添加到构造函数

    setBackground(QColor(Qt::gray)); //текущий цвет фона
anim.setPropertyName("background"); //свойство для анимации
anim.setTargetObject(this); //свойство какого объекта
anim.setDuration(200); //продолжительность смены
anim.setStartValue(QColor(Qt::gray)); //из какого цвета
anim.setEndValue(QColor(Qt::white));  //в какой

    小部件内重新定义鼠标光标进入/退出事件的功能：

    void
ChromeButtom::
enterEvent(QEvent *) {
    //начать анимированную смену свойства background
    anim.setDirection(QAbstractAnimation::Forward);
    anim.start();
}

void
ChromeButtom::
leaveEvent(QEvent *) {
    //начать анимированную смену свойства background в обратном направлении
    anim.setDirection(QAbstractAnimation::Backward);
    anim.start();
}
    • 3

相关问题