最近正在开发一个系统,有时我觉得常用的静态屏保页面太单调了,想加入一些动态的要素。然后就发现了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);
最后调试,如果环境配置正确,就可以看到动态的显示效果了。