參考:

• 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

目前發(fā)現(xiàn)有兩種方法，第一種方法是使用property var，第二種方法是使用腳本。兩種方法各有優(yōu)缺點(diǎn):

• 使用property var，不需要外掛腳本，代碼簡單清晰，但是會對外暴露不必要的屬性
• 使用腳本優(yōu)缺點(diǎn)恰恰與第一種方法相反

本文還提到了一種使用qml文件包裹c(diǎn)++自定義類型的方法，見參考鏈接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;