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


  • Moderators

    @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"})
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.