How to implement a Splash screen in the QML application and qml apply the splash screen

How to implement a Splash screen in the QML application and qml apply the splash screen

In QML applications, we often use a SplashScreen screen to render our applications. So how can we create a Splash Screen in our own applications?

First, we will design our own SplashScreen QML module:

SplashScreen. qml

import QtQuick 2.0Item {    id: splash    anchors.fill: parent    property int timeoutInterval: 2000    signal timeout    Image {        id: splashImage        anchors.fill: parent        source: "images/splash.jpg"    }    Timer {        interval: timeoutInterval; running: true; repeat: false        onTriggered: {            visible = false            splash.timeout()        }    }}

The design here is very simple. We use an image to display our own images. At the same time, we use a Timer. When Timer timeout, We have a signal. This signal can be used by the outside world. This is also a good way to isolate our modules from other modules. We can use this timout signal in other modules to implement what we want to do.
Main. qml
In this module, we directly use SplashScreen. qml:

import QtQuick 2.0import 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: false    width: 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;            }        }    }}

In SplashScreen, we capture the timeout signal and make MainWindow appear. Of course, we can also implement some of our own special effects. In this way, we can implement the functions we want.


Source code for the entire project in: git clone https://gitcafe.com/ubuntu/splashscreen.git
For developers familiar with Qt C ++, we can also use the following example to complete the corresponding functions. We can use the "QtQuick App with qml ui (qmake)" template.
SplashScreen. qml

import QtQuick 2.0import 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 timeout    Page {        title: i18n.tr("")        Image {            id: splashImage            anchors.fill: parent            source: "images/splash.jpg"        }    }}

Here, we use an empty title to overwrite all the pages. In main. cpp, we added some new code:
Main. cpp

#include <QGuiApplication>#include <QQmlApplicationEngine>#include <QQuickView>#include <QElapsedTimer>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();}

Source code for the entire project in: git clone https://gitcafe.com/ubuntu/splashscreenqt.git