0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

在JavaScript中動態(tài)的創(chuàng)建QML對象

工程師鄧生 ? 來源:嵌入式小生 ? 作者:iriczhao ? 2022-09-01 10:42 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

在實(shí)際QML應(yīng)用開發(fā)中,我們可以在JavaScript中動態(tài)的創(chuàng)建QML對象。這樣做可以延遲對象的實(shí)例化,當(dāng)我們在需要創(chuàng)建對象的時(shí)候才在JavaScript代碼中創(chuàng)建,則可以縮短應(yīng)用程序的啟動時(shí)間,還可以動態(tài)創(chuàng)建可視對象,有助于提高應(yīng)用程序性能。

創(chuàng)建動態(tài)對象

有兩種方法可以在JavaScript代碼中動態(tài)的創(chuàng)建對象。

第一種是:調(diào)用Qt.createComponent()來動態(tài)創(chuàng)建一個(gè)Component對象;

第二種是:使用Qt.createQmlObject()函數(shù),以QML字符串的方式創(chuàng)建一個(gè)對象。

如果我們已經(jīng)在QML文檔中定義了一個(gè)現(xiàn)有組件,并希望可以動態(tài)地創(chuàng)建該組件實(shí)例,那么可選擇第一種方法。當(dāng)我們需要在運(yùn)行時(shí)創(chuàng)建QML對象,應(yīng)選擇第二種方法。

下文將分別介紹這兩種方法。

動態(tài)創(chuàng)建組件

要動態(tài)加載定義在QML文件中的組件,需調(diào)用Qt對象中的Qt.createcomponent()函數(shù)。這個(gè)函數(shù)將接收QML文件的URL參數(shù),并根據(jù)這個(gè)URL創(chuàng)建一個(gè)Component對象。

一旦創(chuàng)建了組件,則可以調(diào)用createObject()方法來創(chuàng)建該組件的一個(gè)實(shí)例。createObject()函數(shù)可以接收兩個(gè)參數(shù):

(1)參數(shù)一:第一個(gè)是新對象的父對象。父對象可以是圖形對象(即Item類型)或非圖形對象(即QtObject或C++ QObject類型)。只有帶有圖形父對象的圖形對象才會呈現(xiàn)到Qt Quick視覺畫布中。如果想在后續(xù)設(shè)置父函數(shù),我們可以將null傳遞給這個(gè)函數(shù)。

(2)參數(shù)二:第二個(gè)是可選參數(shù),是<屬性-值>的映射,用于定義對象的初始屬性值。在創(chuàng)建對象之前,將此參數(shù)指定的屬性值應(yīng)用于對象,可以避免綁定錯(cuò)誤。當(dāng)然與在創(chuàng)建對象后定義屬性值和屬性綁定相比,這種方式在性能上有一些小的影響。

例如,這里有一個(gè)qml文件,名為MyComponent.qml,代表一個(gè)QML組件:

importQtQuick2.0

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

然后創(chuàng)建一個(gè)JavaScript腳本文件:componentCreation.js。用于檢測在調(diào)用createObject()之前組件是否被創(chuàng)建好(如果QML文件是通過網(wǎng)絡(luò)加載的,則不可能立即就準(zhǔn)備好,故此處需要判斷處理),如下代碼:

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

在實(shí)際的開發(fā)中,基本上都是從本地加載qml文件,這時(shí)候則可以省略finishCreation()函數(shù),立即調(diào)用createObject(),例如下例代碼:

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

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

注意,上面例子中,createObject()都是在appWindow作為父參數(shù)傳遞的情況下調(diào)用的,因?yàn)閯討B(tài)創(chuàng)建的對象是一個(gè)可視化對象。創(chuàng)建的對象將成為main.qml中的appWindow對象的子對象,并出現(xiàn)在界面中。

接著我們在main.qml文件中使用import "componentCreation.js" as MyScript語句導(dǎo)入componentcreate.js文件,用于創(chuàng)建MyComponent對象:

importQtQuick2.0
import"componentCreation.js"asMyScript

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

Component.onCompleted:MyScript.createSpriteObjects();
}

如果需要將信號連接到動態(tài)創(chuàng)建對象的信號處理函數(shù),需使用信號的connect()方法。

以QML字符串形式創(chuàng)建對象

在QML開發(fā)中,很多時(shí)候都會在運(yùn)行時(shí)定義QML對象,這時(shí)候則可以使用Qt.createQmlObject()函數(shù)來實(shí)現(xiàn),在函數(shù)中指定QML字符串來創(chuàng)建一個(gè)QML對象,如下代碼:

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

Qt.createQmlObject()函數(shù)需要三個(gè)參數(shù):

(1)第一個(gè)參數(shù)是要創(chuàng)建的QML字符串。其中的QML字符串就像在新qml文件中創(chuàng)建組件的編寫方式一樣。

(2)第二個(gè)參數(shù)是新對象的父對象。

(3)第三個(gè)參數(shù)是與新對象相關(guān)聯(lián)的文件路徑,用于報(bào)告錯(cuò)誤信息。

【特別注意(一)】

如果QML字符串使用相對路徑方式導(dǎo)入文件,則該路徑應(yīng)該相對于父對象(方法的第二個(gè)參數(shù))所在的文件。

【特別注意(二)】

在構(gòu)建靜態(tài)QML應(yīng)用程序時(shí),QML引擎會掃描QML文件來檢測導(dǎo)入依賴項(xiàng)。這樣,所有必需的插件和資源都在編譯時(shí)解析。但是,只考慮顯式的import語句(在QML文件頂部找到的那些),而不會考慮包含在字符串文本中的import語句。因此,為了支持靜態(tài)構(gòu)建,我們需要在使用Qt.createQmlObject()的QML文件中,還需要在文件頂部顯式地包含所有的導(dǎo)入信息。

管理動態(tài)創(chuàng)建的對象

在管理動態(tài)創(chuàng)建的對象時(shí),必須確保創(chuàng)建上下文的生命周期比創(chuàng)建的對象長。否則,如果創(chuàng)建上下文先被銷毀,動態(tài)對象中的綁定和信號處理程序?qū)傲T工”。

實(shí)際的創(chuàng)建上下文取決于對象是如何創(chuàng)建的:

(1)如果使用了Qt.createComponent(),創(chuàng)建上下文就是在其中調(diào)用此方法的QQmlContext。

(2)如果調(diào)用Qt.createQmlObject(),創(chuàng)建上下文是傳遞給該方法的父對象的上下文。

(3)如果定義了一個(gè)Component{}對象,并且在該對象上調(diào)用了createObject()或incubateObject(),那么創(chuàng)建上下文就是組件定義的上下文。

備注:雖然動態(tài)創(chuàng)建的對象可以像其他對象一樣使用,但它們在QML中是沒有id屬性的。

刪除動態(tài)對象

在大多數(shù)用戶界面開發(fā)中,將可視對象的不透明度設(shè)置為0或?qū)⒖梢晫ο笠瞥銎聊?,則可以滿足許多的開發(fā)需求了。但是,如果應(yīng)用界面中有多個(gè)動態(tài)創(chuàng)建的對象,那么刪除不使用的對象可能會獲得較好性能。

但注意不要手動刪除由QML對象工廠(如Loader和Repeater)動態(tài)創(chuàng)建的對象。另外還應(yīng)該避免刪除不是自己動態(tài)創(chuàng)建的對象。

我們可以使用destroy()方法刪除Item。該方法有一個(gè)可選參數(shù)(默認(rèn)為0),用于指定對象被銷毀前的延遲時(shí)間。

這里有一個(gè)例子:我們在application.qml文件中創(chuàng)建了SelfDestroyingRect的五個(gè)實(shí)例組件。每個(gè)實(shí)例運(yùn)行一個(gè)NumberAnimation,當(dāng)animation完成時(shí),調(diào)用它的根對象的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可以調(diào)用object.destroy()來銷毀已創(chuàng)建的對象。

備注:上述代碼中,調(diào)用對象的destroy()是安全的。因?yàn)閷ο蟛粫谡{(diào)用destroy()的瞬間被銷毀,而是在腳本塊結(jié)束后的某個(gè)時(shí)刻被清除(非零延遲除外)。

在銷毀對象時(shí),需要注意對象只有在動態(tài)創(chuàng)建的情況下才能動態(tài)銷毀。

對于使用Qt.createQmlObject()創(chuàng)建的對象也可以使用destroy()銷毀,例如下例JavaScript代碼:

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



審核編輯:劉清

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報(bào)投訴
  • URL
    URL
    +關(guān)注

    關(guān)注

    0

    文章

    141

    瀏覽量

    15849
  • JAVA語言
    +關(guān)注

    關(guān)注

    0

    文章

    138

    瀏覽量

    20684
  • javascript
    +關(guān)注

    關(guān)注

    0

    文章

    525

    瀏覽量

    54764

原文標(biāo)題:“神級”般的QML開發(fā)技巧,學(xué)會了

文章出處:【微信號:嵌入式小生,微信公眾號:嵌入式小生】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 0人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點(diǎn)推薦

    PLL技術(shù)FPGA動態(tài)調(diào)頻與展頻功能應(yīng)用

    隨著現(xiàn)代電子系統(tǒng)的不斷發(fā)展,時(shí)鐘管理成為影響系統(tǒng)性能、穩(wěn)定性和電磁兼容性(EMI)的關(guān)鍵因素之一。FPGA設(shè)計(jì),PLL因其高精度、靈活性和可編程性而得到廣泛應(yīng)用,本文將深入探討PLL技術(shù)FPGA
    的頭像 發(fā)表于 06-20 11:51 ?949次閱讀
    PLL技術(shù)<b class='flag-5'>在</b>FPGA<b class='flag-5'>中</b>的<b class='flag-5'>動態(tài)</b>調(diào)頻與展頻功能應(yīng)用

    RT-Thread Nano移植后動態(tài)創(chuàng)建線程創(chuàng)建不了怎么處理?

    RT-Thread Nano移植后動態(tài)創(chuàng)建線程創(chuàng)建不了,靜態(tài)可以.直接燒錄DEMO也一樣,將RT_USING_HEAP開起來,使用動態(tài)創(chuàng)建
    發(fā)表于 06-11 06:36

    為什么SDK 1.3.5創(chuàng)建的配置文件是SDK 1.3.4創(chuàng)建的 打不開?

    為什么 SDK 1.3.5 創(chuàng)建的配置文件是 SDK 1.3.4 創(chuàng)建的 打不開?
    發(fā)表于 05-13 07:22

    ADC08D1520QML可以采集到的最高頻率是多少?

    如題,ADC08D1520QML的采樣率為最高3GSPS。那如果我要采集的信號的頻率是1GHZ的,采集效果會如何呢?
    發(fā)表于 02-06 06:51

    SciChart—高性能的JavaScript圖表和圖形庫

    使用 SciChart 的 JavaScript 圖表庫為您的 JS 應(yīng)用程序發(fā)現(xiàn)終極解決方案。 使用 WebGL 創(chuàng)建動態(tài)、高速的圖表和圖形,非常適合實(shí)時(shí)處理復(fù)雜的數(shù)據(jù)可視化。使用我們強(qiáng)大而靈活
    的頭像 發(fā)表于 01-22 10:15 ?710次閱讀
    SciChart—高性能的<b class='flag-5'>JavaScript</b>圖表和圖形庫

    Spire.XLS for JavaScript——多功能JavaScript電子表格庫(一)

    Spire.XLS for JavaScript 是一款專為開發(fā)人員設(shè)計(jì)的 JavaScript Excel 工具庫,支持在任何 JavaScript 環(huán)境下直接創(chuàng)建、讀取、編輯和轉(zhuǎn)換
    的頭像 發(fā)表于 01-21 09:29 ?498次閱讀
    Spire.XLS for <b class='flag-5'>JavaScript</b>——多功能<b class='flag-5'>JavaScript</b>電子表格庫(一)

    javascript:void(0) 是否影響SEO優(yōu)化

    GoogleBot)解析網(wǎng)頁時(shí),會嘗試?yán)斫饷總€(gè)鏈接的目的和指向。然而,當(dāng)爬蟲遇到 javascript:void(0) 這樣的偽URL時(shí),它無法確定這個(gè)鏈接的真實(shí)意圖或指向的具體內(nèi)容。因此,這樣的鏈接
    的頭像 發(fā)表于 12-31 16:08 ?548次閱讀

    javascript:void(0) 的作用是什么

    javascript:void(0) HTML 和 JavaScript 是一個(gè)常見的表達(dá)式,主要用來創(chuàng)建一個(gè)無操作的鏈接(通常是 標(biāo)
    的頭像 發(fā)表于 12-31 15:55 ?2364次閱讀

    HarmonyOS Next 應(yīng)用元服務(wù)開發(fā)-分布式數(shù)據(jù)對象遷移數(shù)據(jù)文件資產(chǎn)遷移

    數(shù)據(jù)對象組網(wǎng)進(jìn)行數(shù)據(jù)恢復(fù)。 創(chuàng)建空的分布式數(shù)據(jù)對象,用于接收恢復(fù)的數(shù)據(jù); 從want讀取分布式數(shù)據(jù)對象組網(wǎng)id; 注冊on()接口監(jiān)聽數(shù)據(jù)
    發(fā)表于 12-24 10:11

    HarmonyOS Next 應(yīng)用元服務(wù)開發(fā)-分布式數(shù)據(jù)對象遷移數(shù)據(jù)權(quán)限與基礎(chǔ)數(shù)據(jù)

    。 源端UIAbility的onContinue()接口中創(chuàng)建分布式數(shù)據(jù)對象并保存數(shù)據(jù),執(zhí)行流程如下: onContinue()接口中使用create()接口
    發(fā)表于 12-24 09:40

    HarmonyOS Web開發(fā)性能優(yōu)化指導(dǎo)

    ,5.76Mb資源預(yù)編譯時(shí)約有2915ms收益。 | | 額外的存儲資源。 | 加載HTTP/HTTPS協(xié)議JavaScript的Web頁面,第一及第二次優(yōu)化加載性能。| | 資源攔截替換
    發(fā)表于 12-06 08:41

    一種半動態(tài)環(huán)境的定位方法

    非靜態(tài)環(huán)境中進(jìn)行地圖繪制和定位是機(jī)器人學(xué)的基本問題。之前的方法大多關(guān)注靜態(tài)和高度動態(tài)的物體,但在半動態(tài)環(huán)境,如果不考慮低動態(tài)物體(如停放
    的頭像 發(fā)表于 09-30 14:40 ?563次閱讀
    一種半<b class='flag-5'>動態(tài)</b>環(huán)境<b class='flag-5'>中</b>的定位方法

    實(shí)際開發(fā)動態(tài)代理技術(shù)都是如何應(yīng)用的?

    動態(tài)代理技術(shù)因其靈活性和強(qiáng)大的功能,軟件開發(fā)中被廣泛應(yīng)用,特別是需要在運(yùn)行時(shí)動態(tài)地改變對象行為的場景
    的頭像 發(fā)表于 09-23 07:46 ?411次閱讀

    LM555QML定時(shí)器數(shù)據(jù)表

    電子發(fā)燒友網(wǎng)站提供《LM555QML定時(shí)器數(shù)據(jù)表.pdf》資料免費(fèi)下載
    發(fā)表于 08-20 09:29 ?0次下載
    LM555<b class='flag-5'>QML</b>定時(shí)器數(shù)據(jù)表

    嵌入式QT常見開發(fā)方式有哪些?

    JavaScript或C++后端處理復(fù)雜的業(yè)務(wù)邏輯和硬件接口操作。 4. 混合模式開發(fā): 一些項(xiàng)目中,可能采用Qt Widgets與Qt Quick/QML相結(jié)合的方式,根據(jù)實(shí)際需求選擇不同技術(shù)棧
    發(fā)表于 08-12 10:05

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動獲取豐厚的禮品