在JavaScript中动态的创建QML对象

在实际QML应用开发中，我们可以在JavaScript中动态的创建QML对象。这样做可以延迟对象的实例化，当我们在需要创建对象的时候才在JavaScript代码中创建，则可以缩短应用程序的启动时间，还可以动态创建可视对象，有助于提高应用程序性能。

创建动态对象

有两种方法可以在JavaScript代码中动态的创建对象。

第一种是：调用Qt.createComponent()来动态创建一个Component对象；

第二种是：使用Qt.createQmlObject()函数，以QML字符串的方式创建一个对象。

如果我们已经在QML文档中定义了一个现有组件，并希望可以动态地创建该组件实例，那么可选择第一种方法。当我们需要在运行时创建QML对象，应选择第二种方法。

下文将分别介绍这两种方法。

动态创建组件

要动态加载定义在QML文件中的组件，需调用Qt对象中的Qt.createcomponent()函数。这个函数将接收QML文件的URL参数，并根据这个URL创建一个Component对象。

一旦创建了组件，则可以调用createObject()方法来创建该组件的一个实例。createObject()函数可以接收两个参数:

（1）参数一：第一个是新对象的父对象。父对象可以是图形对象(即Item类型)或非图形对象(即QtObject或C++ QObject类型)。只有带有图形父对象的图形对象才会呈现到Qt Quick视觉画布中。如果想在后续设置父函数，我们可以将null传递给这个函数。

（2）参数二：第二个是可选参数，是<属性-值>的映射，用于定义对象的初始属性值。在创建对象之前，将此参数指定的属性值应用于对象，可以避免绑定错误。当然与在创建对象后定义属性值和属性绑定相比，这种方式在性能上有一些小的影响。

例如，这里有一个qml文件，名为MyComponent.qml，代表一个QML组件：
 

 

import QtQuick 2.0

Rectangle { width: 80; height: 50; color: "red" }

 

然后创建一个JavaScript脚本文件：componentCreation.js。用于检测在调用createObject()之前组件是否被创建好（如果QML文件是通过网络加载的，则不可能立即就准备好，故此处需要判断处理），如下代码：

 

var component;
var sprite;

function createSpriteObjects() {
    component = Qt.createComponent("MyComponent.qml");
    if (component.status == Component.Ready)
        finishCreation();
    else
        component.statusChanged.connect(finishCreation);
}

function finishCreation() {
    if (component.status == Component.Ready) {
        sprite = component.createObject(appWindow, {x: 100, y: 100});
        if (sprite == null) {
            // Error Handling
            console.log("Error creating object");
        }
    } else if (component.status == Component.Error) {
        // Error Handling
        console.log("Error loading component:", component.errorString());
    }
}

 

在实际的开发中，基本上都是从本地加载qml文件，这时候则可以省略finishCreation()函数，立即调用createObject()，例如下例代码：

 

function createSpriteObjects() {
    component = Qt.createComponent("Sprite.qml");
    sprite = component.createObject(appWindow, {x: 100, y: 100});

    if (sprite == null) {
        // Error Handling
        console.log("Error creating object");
    }
}

 

注意，上面例子中，createObject()都是在appWindow作为父参数传递的情况下调用的，因为动态创建的对象是一个可视化对象。创建的对象将成为main.qml中的appWindow对象的子对象，并出现在界面中。

接着我们在main.qml文件中使用import "componentCreation.js" as MyScript语句导入componentcreate.js文件，用于创建MyComponent对象：

 

import QtQuick 2.0
import "componentCreation.js" as MyScript

Rectangle {
    id: appWindow
    width: 300; height: 300

    Component.onCompleted: MyScript.createSpriteObjects();
}

 

如果需要将信号连接到动态创建对象的信号处理函数，需使用信号的connect()方法。

以QML字符串形式创建对象

在QML开发中，很多时候都会在运行时定义QML对象，这时候则可以使用Qt.createQmlObject()函数来实现，在函数中指定QML字符串来创建一个QML对象，如下代码：

 

var newObject = Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',parentItem,"dynamicSnippet1");

 

Qt.createQmlObject()函数需要三个参数：

（1）第一个参数是要创建的QML字符串。其中的QML字符串就像在新qml文件中创建组件的编写方式一样。

（2）第二个参数是新对象的父对象。

（3）第三个参数是与新对象相关联的文件路径，用于报告错误信息。

【特别注意（一）】

如果QML字符串使用相对路径方式导入文件，则该路径应该相对于父对象(方法的第二个参数)所在的文件。

【特别注意（二）】

在构建静态QML应用程序时，QML引擎会扫描QML文件来检测导入依赖项。这样，所有必需的插件和资源都在编译时解析。但是，只考虑显式的import语句(在QML文件顶部找到的那些)，而不会考虑包含在字符串文本中的import语句。因此，为了支持静态构建，我们需要在使用Qt.createQmlObject()的QML文件中，还需要在文件顶部显式地包含所有的导入信息。

管理动态创建的对象

在管理动态创建的对象时，必须确保创建上下文的生命周期比创建的对象长。否则，如果创建上下文先被销毁，动态对象中的绑定和信号处理程序将会“罢工”。

实际的创建上下文取决于对象是如何创建的：

（1）如果使用了Qt.createComponent()，创建上下文就是在其中调用此方法的QQmlContext。

（2）如果调用Qt.createQmlObject()，创建上下文是传递给该方法的父对象的上下文。

（3）如果定义了一个Component{}对象，并且在该对象上调用了createObject()或incubateObject()，那么创建上下文就是组件定义的上下文。

备注：虽然动态创建的对象可以像其他对象一样使用，但它们在QML中是没有id属性的。

删除动态对象

在大多数用户界面开发中，将可视对象的不透明度设置为0或将可视对象移出屏幕，则可以满足许多的开发需求了。但是，如果应用界面中有多个动态创建的对象，那么删除不使用的对象可能会获得较好性能。

但注意不要手动删除由QML对象工厂(如Loader和Repeater)动态创建的对象。另外还应该避免删除不是自己动态创建的对象。

我们可以使用destroy()方法删除Item。该方法有一个可选参数(默认为0)，用于指定对象被销毁前的延迟时间。

这里有一个例子：我们在application.qml文件中创建了SelfDestroyingRect的五个实例组件。每个实例运行一个NumberAnimation，当animation完成时，调用它的根对象的destroy()来销毁，代码如下：

//application.qml

 

import QtQuick 2.0

Item {
    id: container
    width: 500; height: 100

    Component.onCompleted: {
        var component = Qt.createComponent("SelfDestroyingRect.qml");
        for (var i=0; i<5; i++) {
            var object = component.createObject(container);
            object.x = (object.width + 10) * i;
        }
    }
}

 

//SelfDestroyingRect.qml

 

import QtQuick 2.0

Rectangle {
    id: rect
    width: 80; height: 80
    color: "red"

    NumberAnimation on opacity {
        to: 0
        duration: 1000

        onRunningChanged: {
            if (!running) {
                console.log("Destroying...")
                rect.destroy();
            }
        }
    }
}

 

另外，application.qml可以调用object.destroy()来销毁已创建的对象。

备注：上述代码中，调用对象的destroy()是安全的。因为对象不会在调用destroy()的瞬间被销毁，而是在脚本块结束后的某个时刻被清除(非零延迟除外)。

在销毁对象时，需要注意对象只有在动态创建的情况下才能动态销毁。

对于使用Qt.createQmlObject()创建的对象也可以使用destroy()销毁，例如下例JavaScript代码：

 

var newObject = Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                                   parentItem,
                                   "dynamicSnippet1");
newObject.destroy(1000);

 

审核编辑：刘清