2

単純な長方形などの 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()
    }
}
4

3 に答える 3

0

まあ、私はそれを自分で解決しました。しかし、それが正しい決定であるかどうかは完全にはわかりません。

  1. main.qmlから ObjectModelを削除することにしました

  2. ...そしてそれをListModelに置き換えます 

    ListModel {
    id: dataModel

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

  3. 最後に、 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
    }

  4. ???

  5. 利益！

ご清聴ありがとうございました:)

于 2013-10-17T16:53:34.917 に答える
0

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?

于 2013-10-16T13:48:22.603 に答える