grid of MouseArea in Qt QML

I have made an Item in QT QML which contains a MouseArea element.

Here is the code,

import QtQuick 1.0
Rectangle {
id: base
width: 240
height: 320
x:0; y:0
color: "#323138"
/////////////////////// MAIN FOCUSSCOPE //////////////////////
FocusScope {
    id: mainfocus
    height: base.height; width: base.width
    focus: true
    /////////////////////// MAIN GRID ///////////////////////////
    GridView {
        id: maingrid
        width: base.width-10; height: base.height-titlebar.height-10
        x: 5; y: titlebar.height+5;
        cellHeight: maingrid.height/3; cellWidth: maingrid.width/3-1
        Component {
            id: myicon
            Rectangle {
                id: wrapper
                height: maingrid.cellHeight-10; width: maingrid.cellWidth-10
                radius: 8; smooth: true
                color: GridView.isCurrentItem ? "#c0d0c0" : "transparent"
                focus: true
                MouseArea {
                    id: clickable
                    anchors.fill: wrapper
                    hoverEnabled: true
                    //onClicked: func()
                }
                Image {
                    id: iconpic
                    source: "./ui6.svg"
                    anchors.centerIn: wrapper
                }
                Text {
                    id: iconname
                    color: wrapper.GridView.isCurrentItem ? "black" : "#c8dbc8"
                    anchors.top: iconpic.bottom; anchors.horizontalCenter: iconpic.horizontalCenter
                    text:  name
                }
            }
        }
        model: 4
        delegate: myicon
        focus:  true
    }
}
//////////////////////// TITLEBAR ///////////////////////
Rectangle {
    id: titlebar
    x:base.x
    y:base.y
    height: 25; width: base.width
    color : "#356f47"
    Text {
        color: "#fdfdfd"
        anchors.centerIn: titlebar
        text: "title"
    }
}
}

I want to make a grid of such Items so that it gives me a grid of custom made click-able Items that I created which I can use for different functions.

Using the GridView element, I was able to make such a grid which used number of my custom made Items as a template.

The problem is that when I click anyone of these Items it executes a single开发者_Go百科 function since there was only one MouseArea element in my Item. I am able to detect a click on an Item, but not able to uniquely determine which Item was clicked. How do I achieve this ?

Of course, I might be doing it wrong, so other suggestions are also welcome. Thanks

---

When the GridView item creates the instances they inherit the index variable. This identifies the unique item.

MouseArea {
    id: clickable
    anchors.fill: wrapper
    hoverEnabled: true
    onClicked: {
        maingrid.currentIndex=index;

        switch (index)
        {
        case 0:
            //Function or method to call when clicked on first item
            break;
        case 1:
            //Function or method to call when clicked on second item
            break;
        default:
            //Function or method to call when clicked on another item
            break;
        }
    }
}

I hope it helps you!