一、動(dòng)態(tài)創(chuàng)建對(duì)象

有兩種方法可以從 JavaScript 動(dòng)態(tài)創(chuàng)建對(duì)象：

• 調(diào)用 Qt.createComponent() 動(dòng)態(tài)創(chuàng)建 Component 對(duì)象
• 使用 Qt.createQmlObject() 從 QML 字符串創(chuàng)建對(duì)象
  

雖然動(dòng)態(tài)創(chuàng)建的對(duì)象可以與其他對(duì)象一樣使用，但它們?cè)?QML 中沒(méi)有 id。

1.1、動(dòng)態(tài)創(chuàng)建組件

可以調(diào)用它的 createObject() 方法來(lái)創(chuàng)建該組件的一個(gè)實(shí)例。這個(gè)函數(shù)可以接受兩個(gè)參數(shù)：

第一個(gè)是新對(duì)象的父對(duì)象。父對(duì)象可以是圖形對(duì)象（即 Item 類(lèi)型）或非圖形對(duì)象（即 QtObject 或 C++ QObject 類(lèi)型）。只有帶有圖形父對(duì)象的圖形對(duì)象才會(huì)被渲染到 Qt Quick 可視畫(huà)布上。如果希望稍后設(shè)置父級(jí)，可以安全地將 null 傳遞給此函數(shù)。
第二個(gè)是可選的，是一個(gè)屬性值對(duì)的映射，它定義了對(duì)象的初始任何屬性值。此參數(shù)指定的屬性值在對(duì)象創(chuàng)建完成之前應(yīng)用于對(duì)象，避免在必須初始化特定屬性以啟用其他屬性綁定時(shí)可能發(fā)生的綁定錯(cuò)誤。此外，與在創(chuàng)建對(duì)象后定義屬性值和綁定相比，性能優(yōu)勢(shì)很小。
示例。

Sprite.qml 它定義了一個(gè)簡(jiǎn)單的 QML 組件：

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

main.qml 導(dǎo)入了一個(gè) componentCreation.js JavaScript 文件，該文件將創(chuàng)建 Sprite 對(duì)象：

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());
    }
}

當(dāng)使用帶有相對(duì)路徑的文件時(shí)，路徑應(yīng)該是相對(duì)于執(zhí)行 Qt.createComponent() 的文件。

也可以通過(guò) incubateObject() 函數(shù)在不阻塞的情況下實(shí)例化組件。

1.2、從 QML 字符串創(chuàng)建對(duì)象

可以使用 Qt.createQmlObject() 函數(shù)從 QML 字符串創(chuàng)建 QML 對(duì)象，如下例所示：

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

• 第一個(gè)參數(shù)是要?jiǎng)?chuàng)建的 QML 字符串。
• 第二個(gè)參數(shù)是新對(duì)象的父對(duì)象，適用于組件的父參數(shù)語(yǔ)義同樣適用于 createQmlObject() 。
• 第三個(gè)參數(shù)是與新對(duì)象關(guān)聯(lián)的文件路徑，這用于錯(cuò)誤報(bào)告。

如果 QML 字符串使用相對(duì)路徑導(dǎo)入文件，則路徑應(yīng)該相對(duì)于定義父對(duì)象（方法的第二個(gè)參數(shù)）的文件。

在構(gòu)建靜態(tài) QML 應(yīng)用程序時(shí)，會(huì)掃描 QML 文件以檢測(cè)導(dǎo)入依賴項(xiàng)。這樣，所有必要的插件和資源都會(huì)在編譯時(shí)解決。但是，這僅考慮顯式導(dǎo)入語(yǔ)句（位于 QML 文件頂部的語(yǔ)句），而不考慮包含在字符串文字中的導(dǎo)入語(yǔ)句。為了支持靜態(tài)構(gòu)建，用戶需要確保使用 Qt.createQmlObject() 的 QML 文件在文件頂部明確包含所有（包括字符串文字內(nèi)部）必要的導(dǎo)入。

二、動(dòng)態(tài)刪除對(duì)象

在許多用戶界面中，將可視對(duì)象的不透明度設(shè)置為 0 或?qū)⒖梢晫?duì)象移出屏幕而不是將其刪除就足夠了。 但是，如果有大量動(dòng)態(tài)創(chuàng)建的對(duì)象，則刪除未使用的對(duì)象可能會(huì)獲得有價(jià)值的性能優(yōu)勢(shì)。

請(qǐng)注意：永遠(yuǎn)不應(yīng)該手動(dòng)刪除由便利 QML 對(duì)象工廠（例如 Loader 和 Repeater）動(dòng)態(tài)創(chuàng)建的對(duì)象。此外，應(yīng)該避免刪除不是自己動(dòng)態(tài)創(chuàng)建的對(duì)象。

可以使用 destroy() 方法刪除項(xiàng)目。 此方法有一個(gè)可選參數(shù)（默認(rèn)為 0），用于指定銷(xiāo)毀對(duì)象之前的近似延遲（以毫秒為單位）。

示例。application.qml 創(chuàng)建 SelfDestroyingRect.qml 組件的五個(gè)實(shí)例。 每個(gè)實(shí)例運(yùn)行一個(gè) NumberAnimation，當(dāng)動(dòng)畫(huà)完成時(shí)，調(diào)用它的根對(duì)象上的 destroy() 來(lái)銷(xiāo)毀自己：

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 可以通過(guò)調(diào)用 object.destroy() 銷(xiāo)毀創(chuàng)建的對(duì)象。

請(qǐng)注意：對(duì)該對(duì)象內(nèi)的對(duì)象調(diào)用 destroy() 是安全的。 對(duì)象不會(huì)在調(diào)用 destroy() 的瞬間被銷(xiāo)毀，而是在該腳本塊結(jié)束和下一幀之間的某個(gè)時(shí)間被清除（除非指定了非零延遲）。

另請(qǐng)注意，如果 SelfDestroyingRect 實(shí)例是像這樣靜態(tài)創(chuàng)建的：

Item 
{
    SelfDestroyingRect 
    {
        // ...
    }
}

這會(huì)導(dǎo)致錯(cuò)誤，因?yàn)閷?duì)象只有在動(dòng)態(tài)創(chuàng)建時(shí)才能動(dòng)態(tài)銷(xiāo)毀。

使用 Qt.createQmlObject() 創(chuàng)建的對(duì)象可以類(lèi)似地使用 destroy() 銷(xiāo)毀：

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

到此這篇關(guān)于 JavaScript中 創(chuàng)建動(dòng)態(tài) QML 對(duì)象的方法的文章就介紹到這了,更多相關(guān) JavaScript 創(chuàng)建動(dòng)態(tài) QML 對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論