Create a Qml object using JavaScript

There are two ways to create, both of which are the methods provided by global object Qt.

I. Use Qt. createComponent to load a qml file and create Component

Ii. Use Qt. createQmlObject to create Component from a qml string

Note that the above two methods return Component, which is a type in QML. For more information, see:

Http://qt-project.org/doc/qt-5/qml-qtqml-component.html#details

Therefore, you must call createObject of Component to create a truly available object. The first parameter of createObject is to specify the owner of the bucket, that is, the owner of the parent window. If null is passed, it indicates that it is not displayed temporarily.

To destroy the object, you only need to call the destroy method of the object.

To call the createObject method, you must note that the qml file has been loaded. Because this mechanism allows remote loading of qml files, you must check the status attribute of Component:

This property holds the status of component loading. The status can be one of the following:Component.Null - no data is available for the componentComponent.Ready - the component has been loaded, and can be used to create instances.Component.Loading - the component is currently being loadedComponent.Error - an error occurred while loading the component. Calling errorString() will provide a human-readable description of any errors.

The following is the sample code:

function createItem() {    if (itemComponent.status == Component.Ready && draggedItem == null) {        draggedItem = itemComponent.createObject(    window,    {"image": paletteItem.image,"x": posnInWindow.x,"y": posnInWindow.y,"z": 3    });        // make sure created item is above the ground layer    } else if (itemComponent.status == Component.Error) {        draggedItem = null;        console.log("error creating component");        console.log(itemComponent.errorString());    }}

Note that there is no real type in JavaScript, And the type is also simulated by the object. Therefore, the Component of Qml is also an object in JavaScript code. For example, the itemComponent of the above Code is the Component of Qml, but it is also an object. Use its createObject to create a truly available object and hung it under the window object.

Official Document reference:

Http://qt-project.org/doc/qt-4.8/qdeclarativedynamicobjects.html

Http://qt-project.org/doc/qt-5/qml-qtqml-qt.html#createComponent-method

Http://qt-project.org/doc/qt-5/qml-qtqml-qt.html#createQmlObject-method

This is similar to how web development uses JavaScript to dynamically create HTML tags and insert them into the DOM model.