Qt给静态屏保加上粒子特效

最近正在开发一个系统，有时我觉得常用的静态屏保页面太单调了，想加入一些动态的要素。然后就发现了Qt有一个粒子特效的系统，但是需要用到Qml，而我的系统是用QWidget开发的，没办法直接用Qml…

但是Qt也想到了这一点，官方提供了一个叫做quickwidgets的模块，通过它就可以在QWidgets里嵌入动态的Qml页面。

基于此，我们开始逐步改写。

一、添加quickwidgets模块

QT       += quickwidgets

二、编写qml页面
这里采用的方案是在qml中显示原来的静态图片，并在其上添加粒子特效。使用粒子特效需引用QtQuick.Particles这个包。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: root
    x: 0                  // 右上角横坐标，缺省为0
    y: 0                  // 右上角纵坐标，缺省为0
    width: 800            // 宽度，缺省为0，其子对象仍会显示（相对于0）
    height: 1280          // 高度，缺省为0，其子对象仍会显示（相对于0）
    z: 1                  // 显示顺序，同一层的元素，越大越在上面

    Image {
        id: bg
        source: "qrc:/images/screen"
        width: parent.width
        height: parent.height
        visible: true
    }

    ParticleSystem {
        id: particleSystem
    }

    Emitter {
        id: emitter
        anchors.centerIn: parent
        x: 0
        y: 400
        width: 800
        height: 880
        system: particleSystem
        emitRate: 4
        lifeSpan: 2000
        lifeSpanVariation: 500
        size: 5
        endSize: 20
        sizeVariation: 5
    }

    ImageParticle {
        system: particleSystem
        source: "qrc:/images/star"
        color: "#0D9EED"
        colorVariation: 0.6
        rotation: 15
        rotationVariation: 5
        rotationVelocity: 45
        rotationVelocityVariation: 15
        entryEffect: ImageParticle.Scale
    }
}

代码搭建在Rectangle上，它类似于QWidgets中的label，此处不能使用Window，否则qml页面将在独立的窗口中显示。
Image控制图片显示，相当于setIcon。长度和宽度都选择填满。
声明了一个ParticleSystem并命名，在其上添加了发射器Emitter和图像粒子ImageParticle，通过二者的共同作用，构造初想要的粒子效果。
此处的效果为星光在画面随机位置缓慢亮起，又缓慢黯淡。

三、将qml嵌入QWidgets中
首先将需要的qml放入我们的qrc资源中。
然后在屏保页头文件中引入：

#include <QtQuickWidgets>

最后在原来屏保画面的位置，用如下代码替换。

    QQuickWidget *m_quickWidget = new QQuickWidget(this);
    QUrl source("qrc:/screen.qml");
    m_quickWidget -> setSource(source);

最后调试，如果环境配置正确，就可以看到动态的显示效果了。