在QML应用中，我们经常要用到一个SplashScreen的画面来渲染我们的应用。那么我们怎么在自己的应用中做一个Splash Screen呢？
首先我们来设计一个自己的SplashScreen的QML模块：
【QML|如何在QML应用中实现一个Splash画面】
SplashScreen.qml
import QtQuick 2.0Item {
id: splash
anchors.fill: parentproperty int timeoutInterval: 2000
signal timeoutImage {
id: splashImage
anchors.fill: parent
source: "images/splash.jpg"
}Timer {
interval: timeoutInterval;
running: true;
repeat: false
onTriggered: {
visible = false
splash.timeout()
}
}
}
这里的设计非常简单。我们使用了一个图片来显示自己的画面。同时，我们使用了一个Timer。当Timer timeout时，我们就发生一个信号。这个信号，可以被外界所使用。这也是好一个好的方法让我们的模块和别的模块之间有一个好的隔离。我们可以在其它的模块中利用这个timout信号来实现我们想要做的事情。
Main.qml
在这个模块中，我们直接使用SplashScreen.qml:
import QtQuick 2.0
import Ubuntu.Components 1.1/*!
\brief MainView with a Label and Button elements.
*/MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "splashscreen.liu-xiao-guo"/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: falsewidth: units.gu(60)
height: units.gu(85)Page {
title: i18n.tr("Splashscreen")MainWindow {
id: mainwindow
anchors.fill: parent
visible: false
}SplashScreen {
onTimeout: {
console.log("it times out!");
mainwindow.visible = true;
}
}
}
}
在SplashScreen中，我们捕获timeout信号，并使得MainWindow显现。当然我们也可以实现自己的一些特效。这样我们就可以实现我们想要的功能。
文章图片
文章图片
整个项目的源码在： https://github.com/liu-xiao-guo/splashscreen 对于Qt C++比较熟悉的开发者来说，我们也可以使用如下的例子来完成相应的功能。我们可以使用“QtQuick App with QML UI (qmake)”模版。
SplashScreen.qml
import QtQuick 2.0
import Ubuntu.Components 1.1MainView {
id: mainView
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "splashscreenqt.liu-xiao-guo"width: units.gu(60)
height: units.gu(85)property int timeoutInterval: 2000
signal timeoutPage {
title: i18n.tr("")Image {
id: splashImage
anchors.fill: parent
source: "images/splash.jpg"
}}
}
这里，我们使用了一个空的title，这样可以覆盖所有的页面。在main.cpp中，我们加入了一些新的代码：
main.cpp
#include
#include
#include
#include int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQuickView view;
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.setSource(QUrl(QStringLiteral("qrc:///SplashScreen.qml")));
view.show();
QElapsedTimer t;
t.start();
while(t.elapsed()<2000)
{
QCoreApplication::processEvents();
}view.setSource(QUrl(QStringLiteral("qrc:///Main.qml")));
view.show();
return app.exec();
}
文章图片
文章图片
整个项目的源码在： https://github.com/liu-xiao-guo/splashscreenqt
