一、動態建立物件HZneo

有兩種方法可以從 動態建立物件：

• 呼叫 Qt.createComponent() 動態建立 Component 物件
• 使用 Qt.createQmlObject() 從 QML 字串建立物件
  

雖然動態建立的物件可以與其他物件一樣使用，但它們在 QML 中沒有 id。

1.1、動態建立元件

可以呼叫它的 createObject() 方法來建立該元件的一個例項。這個函式可以接受兩個引數：

第一個是新物件的父物件。父物件可以是圖形物件（即 Item 型別）或非圖形物件（即 QtObject 或 C++ QObject 型別）。只有帶有圖形父物件的圖形物件才會被渲染到 Qt Quick

Sprite.qml 它定義了一個簡單的 QML 元件：

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

main.qml 匯入了一個 componentCreation. Script 檔案，該檔案將建立 Sprite 物件：

import QtQuick 2.0
import "componentCreation.js" as MyScript
 
Rectangle 
{
    id: appWindow
    width: 300; height: 300
 
    Component.onCompleted: MyScript.createSpriteObjects();
}

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) 
    {
        sprite = component.createObject(appWindow,{x: 100,y: 100});
        if (sprite == null) 
        {
            console.log("Error creating object");
        }
    } 
    else if (component.status == Component.Error) 
    {
        console.log("Error loading component:",component.errorString());
    }
}

當使用帶有相對路徑的檔案時，路徑應該是相對於執行 Qt.createComponent() 的檔案。

也可以通過 incubateObject() 函式在不阻塞的情況下例項化元件。

1.2、從 QML 字串建立物件

可以使用 Qt.createQmlObject() 函式從 QML 字串建立 QML 物件，如下例所示：

const newObject = Qt.createQmlObject(`
    import QtQuick 2.0
    Rectangle 
    {
        color: "red"
        width: 20
        height: 20
    }
    `,parentItem,"myDynamicSnippet"
);

• 第一個引數是要建立的 QML 字串。
• 第二個引數是新物件的父物件，適用於元件的父引數語義同樣適用於 createQmlObject() 。
• 第三個引數是與新物件關聯的檔案路徑，這用於錯誤報告。

如果 QML 字串使用相對路徑匯入檔案，則路徑應該相對於定義父物件（方法的第二個引數）的檔案。

在構建靜態 QML 應用程式時，會掃描 QML 檔案以檢測匯入依賴項。這樣，所有必要的外掛和資源都會在編譯時解決。但是，這僅考慮顯式匯入語句（位於 QML 檔案頂部的語句），而不考慮包含在字串文字中的匯入語句。為了支援靜態構建，使用者需要確保使用 Qt.createQmlObject() 的 QML 檔案在檔案頂部明確包含所有（包括字串文字內部）必要的匯入。

二、動態刪除物件

在許多使用者介面中，將可視物件的不透明度設定為 0 或將可視物件移出螢幕而不是將其刪除就足夠了。 但是，如果有大量動態建立的物件，則刪除未使用的物件可能會獲得有價值的效能優勢。

請注意：永遠不應該手動刪除由便利 QML 物件工廠（例如 Loader 和 Repeater）動態建立的物件。此外，應該避免刪除不www.cppcns.com是自己動態建立的物件。

可以使用 destroy() 方法刪除專案。 此方法有一個可選引數（預設為 0），用於指定銷燬物件之前的近似延遲（以毫秒為單位）。

示例。application.qml 建立 SelfDestroyingRect.qml 元件的五個例項。 每個例項執行一個 NumberAnimation，當動畫完成時，呼叫它的根物件上的 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() 的瞬間被銷燬，而是在該塊結束和下一幀之間的某個時間被清除（除非指定了非零延遲）。

另請注意，如果 SelfDestroyingRect 例項是像這樣靜態建立的：

Item 
{
    SelfDestroyingRect 
    {
        // ...
    }
}

這會導致錯誤，因為物件只有在動態建立時才能動態銷燬。

使用 Qt.createQmlObject() 建立的物件可以類似地使用 destroy() 銷燬：

const newObject = Qt.createQmlObject(`
    import QtQuick 2.0
    Rectangle 
    {
        color: "red"
        width: 20
        height: 20
    }
    `,"myDynamicSnippet"
);
newObject.destroy(1000);

到此這篇關於 JavaScript中 建立動態 QML 物件的方法的文章就介紹到這了,更多相關 JavaScript 建立動態 QML 物件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！