Dynamic QML Object Creation from JavaScript
Unsolved
General and Desktop
-
Hi, I have been trying to create Qml object dynamically with the following code
main.qml
import QtQuick 2.3 import QtQuick.Window 2.2 import QtQuick.Controls 1.1 import "js/app.js" as App ApplicationWindow { Grid { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter columns: 4 spacing: 6 Repeater { id : caseimobile model: 16 Rectangle { id:rec; color: "#a39b8a"; width: 65; height: 65; radius : 2 Component.onCompleted: { var compo = Qt.createComponent("Case.qml"); App.make(index,compo); console.log(rec.children); } } Component.onCompleted: console.log(caseimobile.itemAt(2).children) } } }
app.js
function make(k,compo) { if (compo.status == Component.Ready){ compo.incubateObject(caseimobile.itemAt(k)); console.log(compo); } if (compo.status == Component.Error){ console.log("Il y a eu une erreur dans le chargement des cases"); } }
When compiling I have the following message
qml: QQmlComponent(0x7fa30c9b14c0) qml: [object Object] qml: QQmlComponent(0x7fa30ca3ff50) qml: [object Object] qml: QQmlComponent(0x7fa30ca3a230) qml: [object Object] qml: QQmlComponent(0x7fa30ca39da0) qml: [object Object] qml: QQmlComponent(0x7fa30ca01f60) qml: [object Object] ... etc qml: QQmlComponent(0x7fa30ca01f60) qml: [object Object] qml: [object Object]
here is my qml.qrc file :
<RCC> <qresource prefix="/"> <file>main.qml</file> <file>Case.qml</file> <file>js/app.js</file> </qresource> </RCC>
I have also tried this with the function createObject() instead of incubateObject() but nothing seems to work.
Thank you for your answers
-
The problem here is that I can not see any Case.qml created in my application while the following code works perfectly
Grid { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter columns: 4 spacing: 6 Repeater { id : caseimobile model: 16 Rectangle {id:rec; color: "#a39b8a"; width: 65; height: 65; radius : 2 Case{} } } } }