Splash Window

Posted on | In ,

在编写QML应用程序时，有时我们希望添加一个Splash Window（就是各种应用启动时的加载界面），本文将针对如何在纯QML环境下实现Splash Window进行总结，本教程基于Qt官方Example：Window and Screen

Splash WIndow定义

创建一个QML文件Splash.qml，单独对Splash Window进行定义，一般的Splash文件是一张图片，附带一些程序加载的信息即可，代码如下：

Splash.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import QtQuick 2.0
import QtQuick.Window 2.1

//! [splash-properties]
Window {
    id: splash
    color: "transparent"       //方便加载splash image的透明部分，从而创建异形splash window
    title: "Splash Window"     
    modality: Qt.ApplicationModal   
    flags: Qt.SplashScreen    
    property int timeoutInterval: 2000   //splash持续两秒钟
    signal timeout      //时间结束信号
//! [splash-properties]
//! [screen-properties]
    //splash window长宽
    x: (Screen.width - splashImage.width) / 2 
    y: (Screen.height - splashImage.height) / 2
//! [screen-properties]
    width: splashImage.width
    height: splashImage.height

    Image {
        id: splashImage
        source: "../shared/images/qt-logo.png"
        MouseArea {
            anchors.fill: parent
            onClicked: Qt.quit()
        }
    }
    //! [timer]
    //创建一个定时器用于记录splash window的显示时间，从而自动隐藏splash window
    Timer {
        interval: timeoutInterval; running: true; repeat: false
        onTriggered: { 内容略
            visible = false   //触发后隐藏splash window，然后发送timeout信号
            splash.timeout()
        }
    }
    //! [timer]
    
    //当作为Component启动时，设为可见
    Component.onCompleted: visible = true 
}

Root Window定义

一般我们的QML程序都需要一个root object，用于管理所有的属性，我们的root object文件如下：

main.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.2
import "."

QtObject {
    property real defaultSpacing: 10
    property SystemPalette palette: SystemPalette { }
    id: root

    property var splashWindow: Splash {
        onTimeout: mainWindow.visible = true
    }

    property var mainWindow: MainWindow {
    }

}

内容很简单，只有splash window和main window两个属性，其中main window受splash控制，一旦接收到超时信号，便将mainWindow显示出来，通过上述举措，就可以实现一个Splash效果，mainWindow内容略。

参考文献

0%