Qt/QML/Quick 动态生成控件 直接拉到最后看最新 20200316 改

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()
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页