javascript - 动态创建 QML ObjectModel 元素

Question

我正在尝试动态创建一堆 QML ObjectModel 元素，例如简单的矩形，然后在 ListView 中显示它们。但是当我构建我的应用程序时，什么也没有出现。控制台日志仅显示消息:“创建的图形对象未放置在图形场景中”。有没有什么办法可以用这种方法或其他方法正确地做到这一点？

UPD:代码

main.qml

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
                    }
                }
            }
        }
    }
}

imgRectsCreation.js

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

最后 - ImgRectSprite.qml

import QtQuick 2.0

Rectangle {
    width: 100; height: 100;
    color: "red"
    Image {
        width: parent.width
        height: parent.height
        source: window.slotGetFileUrl()
    }
}

Answer 1

我不太喜欢从 JS 代码创建组件 - 我倾向于将 QML 代码放在 .qml 文件中，而“重”(毕竟是 JS)代码放在 .js 文件中 - 。

您是否尝试过使用 Loader 动态创建 qml 对象？对象代替？