Is there a way to pass variables between GridView and Component(delegate)?



  • Dear all, I seek your kind help in my problem. I have a grid view of icons, and when I click one of the icons, I will create a copy of the clicked icon.
    I need to know which icon I am selecting. But under mediaIconDelegate, MouseArea, the function grid1.indexAt does not work, and always produce 0 as result.

    Thank you for your help.

    @
    Component {
    id: mediaIconDelegate
    Item {
    width: grid1.cellWidth; height: grid1.cellHeight
    Column {
    anchors.fill: parent
    Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter;
    width: 64; height: 64
    }
    Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }

               MouseArea {
                   id: iconMouseArea
                   anchors.fill: parent
                   width: 64
                   height: 64
                   hoverEnabled: true
    
                   onEntered: {
        console.log(grid1.indexAt(mouseX, mouseY)); // this does not work, it always output 0
                       var iconObj = Qt.createComponent("icon.qml");
                       iconObj.createObject(parent);
                   }                   
               }
           }
       }
    
       GridView {
           id: grid1
           anchors.fill: parent
           cellWidth: 64; cellHeight: 64
    
           model: MediaIconModel {id:mediaIconModel}    
           delegate: mediaIconDelegate
       }
    

    @



  • You can find a property named "currentIndex" there

    You can try this one:

    @GridView {
    id: grid1
    anchors.fill: parent
    cellWidth: 64; cellHeight: 64
    onCurrentIndexChanged: {
    // Do something
    }

    model: MediaIconModel {id:mediaIconModel}   
    delegate: mediaIconDelegate
    

    }@



  • It's also basic but important to know QML's property binding feature :-) . Most of(I'm not sure if it's all) the properties will bind to onPROPERTY_NAMEChanged slot.



  • And unfortunately your delegate component should set currentIndex

        MouseArea {
            id: iconMouseArea
            .........................
            onClicked: {
                  grid1.currentIndex = index // this sets currentIndex of grid1 to the item
                                                            // on which we have clicked. This becomes 
                                                            // currently selected item now
                
                 if(GridView.isCurrentIndex) { // this will return true if this is currently selected item
                            // create your icon here.
                  }
            }
    


  • Hi Chuck and thisisbhaskar,

    Thank you for your advice and help, now I can solve my problem. :)

    @
    MouseArea {
    id: iconMouseArea
    anchors.fill: parent
    width: 64
    height: 64
    hoverEnabled: true

            onEntered: {
               console.log(index); // this work! can use index
                var iconObj = Qt.createComponent("icon.qml");
                iconObj.createObject(parent);
            }                  
        }
    

    @


Log in to reply
 

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