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);

最後調試，如果環境配置正確，就可以看到動態的顯示效果了。