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

score 0 · Accepted Answer

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

我决定从我的 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
    }

？？？
利润！

感谢您的关注：）

score 0 · Accepted Answer

I'm not a big fan of component creation from JS code - i tend to put QML code in .qml files, and "heavy" (well it's JS afterall) code inside .js files - .

Have you tried to dynamically create qml objects using the Loader object instead?

score 0 · Accepted Answer

尝试用or值替换itemModel为动态创建的对象的父级：nullundefined

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

javascript - QML ObjectModel 元素的动态创建

3 回答 3

Related

Reference