在实际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);
审核编辑:刘清
-
URL
+关注
关注
0文章
139浏览量
15329 -
JAVA语言
+关注
关注
0文章
138浏览量
20090 -
javascript
+关注
关注
0文章
516浏览量
53851
原文标题:“神级”般的QML开发技巧,学会了
文章出处:【微信号:嵌入式小生,微信公众号:嵌入式小生】欢迎添加关注!文章转载请注明出处。
发布评论请先 登录
相关推荐
评论