從JavaScript動態創建QML對象

Qt文章鏈接https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

QML支持從JavaScript內部動態創建對象。可以做到需要時才實例化對象，從而縮短了應用程序的啓動時間。它還允許根據用戶輸入或其他事件動態創建視覺對象並將其添加到場景。

Qt示例eDynamic Scene example

動態創建對象

有兩種方法可以從JavaScript動態創建對象。您可以調用Qt.createComponent（）動態創建Component對象，也可以使用Qt.createQmlObject（）根據QML字符串創建對象。如果您在QML文檔中定義了現有組件，並且想要動態創建該組件的實例，則創建組件會更好。否則，當在運行時生成對象QML本身時，從QML字符串創建對象很有用。

動態創建組件

在一個文件中定義好了一個QML類型，可使用Qt.createComponent（）

//Sprite.qml 定義了一個Sprite類型 
import QtQuick 2.0

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

//----------------------------------文件分隔main.qml-----------------------------------------
// main.qml，調用

import QtQuick 2.0
import "componentCreation.js" as MyScript

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

    Component.onCompleted: MyScript.createSpriteObjects();
}

//-------------------------------文件分隔componentCreation.js--------------------------------------------
//componentCreation.js
var component;
var sprite;


//文件有可能在網絡上，加載會出現延遲
function createSpriteObjects() {
    component = Qt.createComponent("Sprite.qml");  //加載組件後，使用組件創建對象
    if (component.status == Component.Ready) //如果加載完成，則加載組件
        finishCreation();
    else
        component.statusChanged.connect(finishCreation); //沒有完成等待完成後再加載
}

function finishCreation() {
    if (component.status == Component.Ready) {
        //appWindow是main.qml中的rect,sprite將顯示在它的100，100的位置
        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());
    }
}

要將信號連接到動態創建的對象（或從中接收信號），請使用信號connect()方法。有關更多信息，請參見將信號連接到方法和信號。

也可以通過incubateObject（）函數實例化組件而不會阻塞。

 

從QML字符串創建對象

如果直到運行時才定義QML，則可以使用Qt.createQmlObject（）函數從QML字符串中創建QML對象，如以下示例所示：

//第一個參數是要創建的QML字符串。第二個參數是新對象的父對象
var newObject = Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                                   parentItem,
                                   "dynamicSnippet1");

動態刪除對象

只有動態對象才能銷燬

application.qml

import QtQuick 2.0

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

    Component.onCompleted: {
//創建SelfDestroyingRect對象，它顯示完動畫後會把自己銷燬
        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();  //當動畫結束時銷燬對象
            }
        }
    }
}