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