How to create PathView dynamically
-
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
-
@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"})