如何在QML應用中實現一個Splash畫面，qml應用splash畫面

如何在QML應用中實現一個Splash畫面，qml應用splash畫面

在QML應用中，我們經常要用到一個SplashScreen的畫面來渲染我們的應用。那麼我們怎麼在自己的應用中做一個Splash Screen呢？

首先我們來設計一個自己的SplashScreen的QML模組：

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()        }    }}

這裡的設計非常簡單。我們使用了一個圖片來顯示自己的畫面。同時，我們使用了一個Timer。當Timer timeout時，我們就發生一個訊號。這個訊號，可以被外界所使用。這也是好一個好的方法讓我們的模組和別的模組之間有一個好的隔離。我們可以在其它的模組中利用這個timout訊號來實現我們想要做的事情。
Main.qml
在這個模組中，我們直接使用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;            }        }    }}

在SplashScreen中，我們捕獲timeout訊號，並使得MainWindow顯現。當然我們也可以實現自己的一些特效。這樣我們就可以實現我們想要的功能。
    

整個項目的源碼在：git clone https://gitcafe.com/ubuntu/splashscreen.git
對於Qt C++比較熟悉的開發人員來說，我們也可以使用如下的例子來完成相應的功能。我們可以使用“QtQuick App with QML UI (qmake)”模版。
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"        }    }}

這裡，我們使用了一個空的title，這樣可以覆蓋所有的頁面。在main.cpp中，我們加入了一些新的代碼：
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();}

   
整個項目的源碼在： git clone https://gitcafe.com/ubuntu/splashscreenqt.git