参考:
- http://stackoverflow.com/questions/12564289/how-can-i-add-property-dynamically-to-a-qml-element
- https://forum.qt.io/topic/49746/solved-how-to-create-c-object-dynamically-from-within-qml/5
- Importing JavaScript Resources in QML
- Dynamic QML Object Creation from JavaScript
目前发现有两种方法,第一种方法是使用property var,第二种方法是使用脚本。两种方法各有优缺点:
- 使用property var,不需要外挂脚本,代码简单清晰,但是会对外暴露不必要的属性
- 使用脚本优缺点恰恰与第一种方法相反
本文还提到了一种使用qml文件包裹c++自定义类型的方法,见参考链接2。
不多说,直接上代码:
MyCustomObj.h
#ifndef MYCUSTOMOBJ_H
#define MYCUSTOMOBJ_H
#include <QObject>
class MyCustomObj : public QObject
{
Q_OBJECT
public:
explicit MyCustomObj(QObject *parent = 0);
Q_INVOKABLE void func();
};
#endif // MYCUSTOMOBJ_H
MyCustomObj.cpp
#include "MyCustomObj.h"
#include <QDebug>
MyCustomObj::MyCustomObj(QObject *parent) : QObject(parent)
{
}
void MyCustomObj::func()
{
qDebug("Fun with QML");
}
main.qml
import QtQuick 2.7
import QtQuick.Window 2.2
import com.myProject.myCustomStuff 1.0
import "MyObj.js" as MyJsObj
Window {
id: mainWindow
visible: true
width: 640
height: 480
title: qsTr("qml-dynamic-create-cpp-object")
property var my_obj;
Component {
id: myComponent
MyCustomObj {
}
}
Component.onCompleted: {
my_obj = myComponent.createObject(mainWindow)
if (!my_obj) console.error("Error creating object")
console.log(typeof(my_obj))
console.log(Qt.isQtObject(my_obj))
my_obj.func()
MyJsObj.my_js_obj = myComponent.createObject(mainWindow);
if (!MyJsObj.my_js_obj) console.error("Error creating object")
console.log(typeof(MyJsObj.my_js_obj))
console.log(Qt.isQtObject(MyJsObj.my_js_obj))
MyJsObj.my_js_obj.func();
var componentWrapper = Qt.createComponent("MyCustomObjWrapper.qml")
var obj = componentWrapper.createObject(mainWindow);
console.log(typeof(obj))
console.log(Qt.isQtObject(obj))
obj.func();
}
MainForm {
anchors.fill: parent
mouseArea.onClicked: {
Qt.quit();
my_obj.func();
MyJsObj.my_js_obj.func();
}
}
}
MainForm.ui.qml
import QtQuick 2.7
Rectangle {
property alias mouseArea: mouseArea
width: 360
height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
Text {
anchors.centerIn: parent
text: "Hello World"
}
}
MyCustomObjWrapper.qml
import QtQuick 2.0
import com.myProject.myCustomStuff 1.0
MyCustomObj {
id: obj
Component.onCompleted: {
console.log("Created from QML dynamically ")
obj.func()
}
}
MyObj.js
var my_js_obj = null;