StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODynamic creation of QML ObjectModel elements
text
Body
copied!<p>I'am trying to dynamically create bunch of QML ObjectModel elements such as simple rectangles and then show them in ListView. But when I build my application nothing is appear. Console log shows only the message: <em>"Created graphical object was not placed in the graphics scene"</em>. Is there any way to do it right with this approach, or anything else?</p> <p><strong>UPD: code</strong></p> <p><em>main.qml</em></p> <pre><code>import "imgRectsCreation.js" as ImgRectsCreationScript import QtQuick 2.0 import QtQml.Models 2.1 Rectangle { id: root ObjectModel{ id: itemModel Component.onCompleted: ImgRectsCreationScript.createImgRects(); } ListView { id: view clip: true anchors { fill: root; bottomMargin: 30 } model: itemModel preferredHighlightBegin: 0; preferredHighlightEnd: 0 highlightRangeMode: ListView.StrictlyEnforceRange orientation: ListView.Horizontal snapMode: ListView.SnapOneItem; flickDeceleration: 2000 cacheBuffer: 200 } Rectangle { width: root.width; height: 30 x: 10 y: 330 color: "gray" Row { anchors.centerIn: parent spacing: 20 Repeater { // little points at the bottom model: itemModel.count Rectangle { width: 5; height: 5 radius: 3 color: view.currentIndex == index ? "sandybrown" : "white" MouseArea { width: 20; height: 20 anchors.centerIn: parent onClicked: view.currentIndex = index } } } } } } </code></pre> <p><em>imgRectsCreation.js</em></p> <pre><code>var sprite; var component; function createImgRects() { component = Qt.createComponent("ImgRectSprite.qml"); if (component.status === Component.Ready) finishCreation(); else component.statusChanged.connect(finishCreation); } function finishCreation() { for (var i = 0; i < 3; i++) { if (component.status === Component.Ready) { sprite = component.createObject(itemModel, {"x": 10, "y": 10}); if (sprite === null) { // Error Handling console.log("Error creating object"); } } else if (component.status === Component.Error) { // Error Handling console.log("Error loading component:", component.errorString()); } } } </code></pre> <p><em>and finally - ImgRectSprite.qml</em></p> <pre><code>import QtQuick 2.0 Rectangle { width: 100; height: 100; color: "red" Image { width: parent.width height: parent.height source: window.slotGetFileUrl() } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload