How to create PathView dynamically

rahul3349

I need to change arrangement of UI items on screen by pressing some key. Initially I've static view where UI items (e.g images) are arranged as per x,y value set. But on press of some key, these images should arrange in PathView(PathQuad)
I've tried below method but I'm not able to arrange images in specified curve by PathQuad. Image is only displayed at 0,0 but text is arranged as per curve and I can move text along the curve.
My requirement is that WindowImage.qml should not contain source at initially , source file is assigned only when key is pressed.

Rectangle {
    id:root
    width : 720
    height : 640

  Component {
        id: delegate
        Item {
            //width: 80; height: 80
            opacity: PathView.iconOpacity
            scale: PathView.iconScale
        Column {
            Item{
                id: wrapper
                anchors.horizontalCenter: nameText.horizontalCenter
                WindowImage { }  // defined in another qml file
            }
            Text {
                id: nameText
                text:name
                font.pointSize: 16
                color: wrapper.PathView.isCurrentItem ? "red" : "black"
            }
        }
        }
    }

 ListModel {
         id: appModel
         dynamicRoles:true
    }

PathView {
        id:pathCntl
        anchors.fill: parent
        model: appModel
        delegate: delegate
        path: Path {
            startX: 100; startY: 220
            PathAttribute { name: "iconScale"; value: 1.0 }
            PathAttribute { name: "iconOpacity"; value: 1.0 }
            PathQuad { x: 720; y: 320; controlX: 640; controlY: 320 }
            PathAttribute { name: "iconScale"; value: 0.3 }
            PathAttribute { name: "iconOpacity"; value: 0.5 }
            PathQuad { x: 120; y: 100; controlX: 60; controlY: -75 }
        }
        focus: true
        Keys.onLeftPressed: {
            pathCntl.decrementCurrentIndex();
        }
        Keys.onPressed: {
            if ((event.key == Qt.Key_1) && (event.modifiers & Qt.AltModifier)) {
                var windowImageComponent = Qt.createComponent("WindowImage.qml");
                if (windowImageComponent.status != Component.Ready) {
                    console.warn("Error loading windowImage.qml: " +  windowImageComponent.errorString());
                    return;
                }
                console.log("windows added");
                var windowContainer = windowImageComponent.createObject(root);
                windowContainer.imgsrc = "images/green.jpg"
                appModel.append(windowContainer)
                appModel.append({name: "green"})
            }
        }
        Keys.onRightPressed: incrementCurrentIndex()
    }
}

WindowImage.qml

import QtQuick 2.0

Image {
   id:image
    source: imgsrc

  //  width: 64; height: 64
    property string imgsrc
}

Edited: Please use ``` (3 backticks) for posting code blocks - p3c0

p3c0

@rahul3349 I guess just like you added appended name you should append source path of image there itself.

Item{
    id: wrapper
    anchors.horizontalCenter: nameText.horizontalCenter
    WindowImage { source: strpath }  // defined in another qml file
}
...

var windowContainer = windowImageComponent.createObject(root);
//windowContainer.imgsrc = "images/green.jpg"
appModel.append(windowContainer)
appModel.append({name: "green", strpath: "images/green.jpg"})