QML 配合 JavaScript 实现动态生成和删除
方法一:使用 Qt.createComponent(file_path) 相关 QML 已经定义的,并且可以将创建和加载分开
方法二:使用 Qt.createQmlObject(‘相关qml定义’, 父类,文件路径)使用于临时创建 QML 类型,第一参数除了可以直接定义(直接定义使用 ’ ',断句用 ;),还可以直接导入文件,第三参数(有无没关系,无参数不报错)文件路径其实就是包含第一参数内容的文件,这样系统可以很具体的报错
注意:动态生成的对象,应该动态删除避免溢出
方法二:适用于临时使用,或者临时动态创建
1 适合对已有对象进行操作
2 适合较为简单的操作,直接打入执行命令
3 适合没有定义的类
注意:这种方式创建的类是直接生成的,如果需要延迟显示或者其他请使用 方法一(createComponent)
案例一: 第三参数有效,系统输出错误信息,没有第三参数,或者第三参数所代表的文件于第一参数内容不一致
var testCreate = Qt.createQmlObject('import QtQuick 2.0; Rectangle { color: "red" /*缺失 ' ; ' */ width: 20; height: 20}', parentTemp);
输出:qrc:/inline:1:31 Syntax error 由此可见系统可以找出问题的点,就是需要自己数到第31个文字才能确定
案例二: 直接使用文件 推荐使用
file: testReport.qml
import QtQuick 2.0; Rectangle color: "red" width: 20; height: 20}
file:main.qml
var testCreate = Qt.createQmlObject("qrc:/testReport.qml", parentTemp, "qrc:testReport.qml");
component {
id: xx
Text {
text: "xx"
}
}
ttt = xx.createObject(parent) 即可
输出:qrc:/testReport.qml:1:4: Expected token '{" 而且直接点击 错误提示即可定位到错误点,较为方便,推荐
案例三:参数三错误提示失效,但是可以直接提示用户修改的,使用 try{} catch(err){}
try {
var testCreate = Qt.createQmlObject("import QtQuick 2.0; Rectangle { color: "red" /*缺失 ' ; ' */ width: 20; height: 20}', parentTemp, "dddd");
testCreate.destroy(1000);// 1000 后删除
} catch (err) { //err 可以直接使用,这是宏系统提供的
dialog.show('Error on line' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message); //也可以显示具体的错误信息
}
方法一:较为常见的办法
常针对已经定义的 QML
使用步骤:
1 创建模块 Qt.createComponent();
2 等待创建完毕
3 加载模块(并修改属性) createObject() / incubateObject()
4 使用完毕删除 destroy(多少毫秒)
案例一:同步,常用;缺点:可能卡顿
var component = Qt.createComponent("Button.qml");
if (component.status === Component.Ready) {
var button = component.createObject(parentTemp, {"color":"red"}); //同步创建
button.destroy(1000);
}
案例二:异步(可以修改为同步,第三个参数),缺点时效性可能差点;优点:避免卡顿
var component = Qt.createComponent("Button.qml");
var incubator = component.incubateObject(parentTemp,{"color" : "Button.qml"});
if (incubator.status != Component.Ready) {
incubator.onStatusChanged = function(status) {
if (status == Component.Ready)
print("Object", incubator.object, "is now ready!");
}
} else {
print("Object", incubator.object, "is ready imediately!");
}
以上就是 JavaScript 配合 QML 动态删减的办法
修改时间 20200316 添加新的
如果考虑性能,推荐去除 javascript 使用 loading 代替
Loader {
id: loader
asynchronous: true //启动异步加载
active: true // 控制加载的时间
}
loader.setSource() //可以直接加载 文件,类似 Javascript 的
改变 source / sourceComponent 的值就能释放创建的对象
注:
Component 对象也可以直接使用 JavaScript 方法
Component {
id: xx
}
xx.createObject(parent)
//JavaScript 方法
var loaditem = Qt.createComponent("qrc:/xxx.qml")
var item = loaditem.createObject(parent, {"xxx":xxx})
item.destroy()