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

franziss

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
   }

@

Chuck Gao

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

}@

Chuck Gao

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.

thisisbhaskar

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.
              }
        }

franziss

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);
        }                  
    }

@