在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組件：

importQtQuick2.0

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

然后創建一個JavaScript腳本文件：componentCreation.js。用于檢測在調用createObject()之前組件是否被創建好（如果QML文件是通過網絡加載的，則不可能立即就準備好，故此處需要判斷處理），如下代碼：

varcomponent;
varsprite;

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

functionfinishCreation(){
if(component.status==Component.Ready){
sprite=component.createObject(appWindow,{x:100,y:100});
if(sprite==null){
//ErrorHandling
console.log("Errorcreatingobject");
}
}elseif(component.status==Component.Error){
//ErrorHandling
console.log("Errorloadingcomponent:",component.errorString());
}
}

在實際的開發中，基本上都是從本地加載qml文件，這時候則可以省略finishCreation()函數，立即調用createObject()，例如下例代碼：

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

if(sprite==null){
//ErrorHandling
console.log("Errorcreatingobject");
}
}

注意，上面例子中，createObject()都是在appWindow作為父參數傳遞的情況下調用的，因為動態創建的對象是一個可視化對象。創建的對象將成為main.qml中的appWindow對象的子對象，并出現在界面中。

接著我們在main.qml文件中使用import "componentCreation.js" as MyScript語句導入componentcreate.js文件，用于創建MyComponent對象：

importQtQuick2.0
import"componentCreation.js"asMyScript

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

Component.onCompleted:MyScript.createSpriteObjects();
}

如果需要將信號連接到動態創建對象的信號處理函數，需使用信號的connect()方法。

以QML字符串形式創建對象

在QML開發中，很多時候都會在運行時定義QML對象，這時候則可以使用Qt.createQmlObject()函數來實現，在函數中指定QML字符串來創建一個QML對象，如下代碼：

varnewObject=Qt.createQmlObject('importQtQuick2.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

importQtQuick2.0

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

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

//SelfDestroyingRect.qml

importQtQuick2.0

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

NumberAnimationonopacity{
to:0
duration:1000

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

另外，application.qml可以調用object.destroy()來銷毀已創建的對象。

備注：上述代碼中，調用對象的destroy()是安全的。因為對象不會在調用destroy()的瞬間被銷毀，而是在腳本塊結束后的某個時刻被清除(非零延遲除外)。

在銷毀對象時，需要注意對象只有在動態創建的情況下才能動態銷毀。

對于使用Qt.createQmlObject()創建的對象也可以使用destroy()銷毀，例如下例JavaScript代碼：

varnewObject=Qt.createQmlObject('importQtQuick2.0;Rectangle{color:"red";width:20;height:20}',
parentItem,
"dynamicSnippet1");
newObject.destroy(1000);

審核編輯：劉清