Qt 实现窗口边框渐变闪烁的效果

---

前言

  Qt实现窗口边缘渐变闪烁效果，产生某种“闪烁告警”的效果，主要思想是通过QTimer设定时间，不断调用更新函数update()，在update()中setstylesheet，调整边框的rgba最后一个参数a，即透明度。通过规律地调节透明度的数值，以产生“闪烁”的效果。

---

效果

  Qt实现窗口边缘渐变闪烁效果如下图所示。

---

核心代码

编程思路

  通过不断调整边框的rgba中的a的数值，改变边框的透明效果，以实现闪烁的现象。

核心代码：stylesheet = QString("QWidget#widget{border:20px solid;border-color: rgba(255, 0, 0, %1);}").arg(colorvalue());在QString中设置一个占位符“%1”，该占位符的具体数值由colorvalue()进行计算。

widget.h

在Widget类中声明一个定时器QTimer，一个用于计算rgba中参数a的整形变量x，以及QString类型的stylesheet用于存放当前边框样式具体值。

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTimer>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    int colorvalue();

private slots:
    void update();

private:
    Ui::Widget *ui;
    QTimer *timer;
    int x;
    QString stylesheet;
};
#endif // WIDGET_H

widget.cpp

在Widget类构造函数中，将QTimer的timeout信号与update()函数做信号与槽的连接，即时间到的时候更新边框的样式表，其中样式表的colorvalue函数为“当输入的x值小于256时，y=x，大于256的时候为y=511-x”，超过511时重新赋值x为2。

关于这里x的初始值以及循环过后的重新赋值为什么是2而不是0的问题。由于在qss样式表语句border-color: rgba(255, 0, 0, %1)中，最后一位代表透明度，如果该位数值为1，其效果等同于其数值为255即是不透明状态，故在循环中应该避免出现该数值为1的状态。

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    timer = new QTimer(this);
    x = 2;
//    ui->label->setText(QString::number(x,10));
//    ui->label->setStyleSheet("QLabel{font: normal bold 200px;}");
    connect(timer,&QTimer::timeout,this,[=](){this->update();});
    timer->start(1);
}

Widget::~Widget()
{
    delete ui;
}

int Widget::colorvalue()
{
    int y = 0;
    if(x <= 255)
    {
        y = x;
    }
    else
    {
        y = 511 - x;
    }
    x++;
    if(x == 510)
    {
        x = 2;
    }
    return y;
}

void Widget::update()
{
//    ui->label->setText(QString::number(x,10));
//    ui->label->setStyleSheet("QLabel{font: normal bold 200px;}");
    stylesheet = QString("QWidget#widget{border:20px solid;border-color: rgba(255, 0, 0, %1);}").arg(colorvalue());
    ui->widget->setStyleSheet(stylesheet);

}