Strange behavior with delegate Item's position in a GridView

cdelapasse

Hello all,

I want to create a GridView that displays a wall of pictures.

I am currently trying to set an overlay on each picture : picture is a delegate item from a GridView.
Further in my code, a have set a Rectangle where z value is above any one (like an position:absolute in CSS) : "z: 10"

The Rectangle shall cover 1 picture and the 2 pics on the right (or on the left, it depends on selection position). Info: I can't use mouse, only keyboard is allowed.

The strange beahavior comes while i am moving currentIndex, browsing in the GridView ; hereunder is the Grid, you will notice the clip: true
@GridView {
id: sheets
anchors.fill: parent
cellWidth: sheet_width
cellHeight: sheet_height
highlight: sheet_highlight
model: list_of_sheets
delegate: sheet
flow: GridView.TopToBottom
keyNavigationWraps: false
clip: true
}@

Everything is going crazy once I pass the starting list (items displayed at the very first, no browsing), once the first item disappear.

I'm using "var pos = mapToItem(sheets, x, y);" inside the delegate ; hereunder the delegate
@Component {
id: sheet
Item {
id: sheetItem
z: 1
state: "s1"
width: sheet_width
height: sheet_height
focus: false
}
}@

And the overlay looks like :
@Rectangle {
id: sheetOverlay
width: 140 * 3
height: 180
color: "black"
border.color: "#008fdc"
border.width: 4
opacity: 0
z: 10
}@

Anything going wrong ?

Thank you !

Cyrille

=)