QML学习之路(5)——QML应用结构划分

Posted on | In ,

随着QML应用的复杂化，往往需要将复杂应用划分为小单元，本文将介绍对QML进行划分的方法。

文件划分

一般来说，我们将一个具有明确功能的窗口写在一个文件里，然后写一个main.qml文件进行统一管理，例如，一个简单的main.qml文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
    id: root

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

    property var mainWindow: MainWindow {
    }

}

我们可以将main.qml设置一个QtObject根元素，然后在根元素中添加相应的子元素，这里有两个子元素，一个Splash一个MainWindow，均为用户定义的QML元素，其文件如下：

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
import QtQuick 2.0
import QtQuick.Window 2.1

//! [splash-properties]
Window {
    id: splash
    color: "transparent"
    title: "Splash Window"
    modality: Qt.ApplicationModal
    flags: Qt.SplashScreen
    property int timeoutInterval: 2000
    signal timeout
//! [splash-properties]
//! [screen-properties]
    x: (Screen.width - splashImage.width) / 2
    y: (Screen.height - splashImage.height) / 2
//! [screen-properties]
    width: splashImage.width
    height: splashImage.height

    Image {
        id: splashImage
        source: "qrc:/software_images/src/timg.jpeg"
        MouseArea {
            anchors.fill: parent
            onClicked: Qt.quit()
        }
    }
    //! [timer]
    Timer {
        interval: timeoutInterval; running: true; repeat: false
        onTriggered: {
            visible = false
            splash.timeout()
        }
    }
    //! [timer]
    Component.onCompleted: visible = true
}

Component（静态划分）

Loader（动态划分）

参考文献

0%