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.0Rectangle { id: layout; width: 256; height: 306;
GridView {
id: grid;
anchors.fill: parentcellWidth: width/2
cellHeight: height/3model: 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
-
Hi,
Try this:
@
import QtQuick 2.0Rectangle { id: layout; width: 256; height: 306;
GridView {
id: grid;
anchors.fill: parentcellWidth: width/2
cellHeight: height/3model: 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.