My GridView won't select currentItem



  • Hey I've been trying to learn qml on and off but now i want to give it the big effort. I have code that uses a Gridview and a ListModel that only contains images. The part i want to you notice is my delegate code, i have a MouseArea where I've been trying to access the currentItem, but i've had no luck. I've put the simpliest example in the MouseArea. The output of console.log() is "undefined."

    @
    import QtQuick 1.0

    Rectangle { id: layout; width: 256; height: 306;

    GridView {
    id: grid;
    anchors.fill: parent

    cellWidth: width/2
    cellHeight: height/3

    model: ListModel { id: lmodel
    ListElement { img: "image/pat.jpg" }
    ListElement { img: "image/bruce.jpg" }
    ListElement { img: "image/paul.jpg" }
    ListElement { img: "image/julia.jpg" }
    ListElement { img: "image/charlie.jpg" }
    ListElement { img: "image/terry.jpg" }
    ListElement { img: "image/jack.jpg" }
    ListElement { img: "image/ken.jpg" }
    ListElement { img: "image/thunder.jpg" }
    ListElement { img: "image/thomas.jpg" }
    ListElement { img: "image/jen.jpg" }
    ListElement { img: "image/elena.jpg" }
    }
    delegate: Rectangle { id: ii
    width: grid.cellWidth
    height: grid.cellHeight
    border{width: 2; color: "black"}
    Image { source: img ; anchors.fill: parent }

                 MouseArea {
                          anchors.fill: parent
                          onClicked: { console.log(grid.currentItem.index) }  
                 }
        }
    

    }
    }
    @

    The last line of code inside the MouseArea returns "undefined." Any help would be great. Thanks


  • Moderators

    Hi,

    Try this:
    @
    import QtQuick 2.0

    Rectangle { id: layout; width: 256; height: 306;

    GridView {
    id: grid;
    anchors.fill: parent

    cellWidth: width/2
    cellHeight: height/3

    model: ListModel { id: lmodel
    ListElement { img: "image/pat.jpg" }
    ListElement { img: "image/bruce.jpg" }
    ListElement { img: "image/paul.jpg" }
    ListElement { img: "image/julia.jpg" }
    ListElement { img: "image/charlie.jpg" }
    ListElement { img: "image/terry.jpg" }
    ListElement { img: "image/jack.jpg" }
    ListElement { img: "image/ken.jpg" }
    ListElement { img: "image/thunder.jpg" }
    ListElement { img: "image/thomas.jpg" }
    ListElement { img: "image/jen.jpg" }
    ListElement { img: "image/elena.jpg" }
    }
    delegate: Rectangle { id: ii
    width: grid.cellWidth
    height: grid.cellHeight
    border{width: 2; color: "black"}
    Image { source: img ; anchors.fill: parent }
    }
    }

    MouseArea {
    anchors.fill: parent
    onClicked: { console.log(grid.indexAt(mouseX,mouseY)) }
    }
    }
    @



  • Dynamite101, I think this might work too:

    @delegate: Rectangle { id: ii
    width: grid.cellWidth
    height: grid.cellHeight
    border{width: 2; color: "black"}
    Image { source: img ; anchors.fill: parent }

                 MouseArea {
                      anchors.fill: parent
                      onClicked: { console.log(index) }
                 }
        }
    }@
    

    The index is an implied property of the views (ListView, GridView, PathView) and the delegate has access to it.



  • Thank you so much guys! It's working perfectly now.


Log in to reply
 

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