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对象？

Answer 2

好吧，好吧，我自己已经解决了。但我并不完全确定这是一个正确的决定。

我已决定从main.qml中删除 ObjectModel

...并将其替换为 ListModel

ListModel {
    id: dataModel

    dynamicRoles: true
    Component.onCompleted: {
        for (var i = 0; i < 3; i++)
        {
            append({ color: "orange" })
        }
    }
}

最后，我已将委托添加到我的 ListView

 delegate: Rectangle {
    width: view.width
    height: view.height
    color: model.color

    Image {
        width: parent.width
        height: parent.height
        source: window.slotGetFileUrl() // includes logic to select images
    }

???
PROFIT！

感谢您的关注：）

Answer 3

尝试将itemModel替换为null或undefined值的动态创建对象的父对象：

sprite = component.createObject(null, {"x": 10, "y": 10});

动态创建QML ObjectModel元素

3 个答案: