GridView : change state of an item

qtnext

Hi,

I wants to display image in a gridview. When I click on an image delegate, I change state (change size image, ....). I wants to be able to reset previous selected image when I click outside of the item (when I click on an empty area or when I click on another image). I don't know how can I do this ?

mbrasser

Rather than directly setting the state when clicking, you can set the currentIndex of the GridView to the index of the item you've clicked (onClicked: view.currentIndex = index), and use the isCurrentItem attached property to change the state (when: delegateId.GridView.isCurrentItem). That will make sure that only one item in the GridView ever looks selected.

For clicking in an empty area, you could try filling all the extra space with a MouseArea (e.g. behind the GridView), and setting the currentIndex to -1 when clicked to clear the selection. This is something I don't think that we handle very well right now, but that should hopefully improve in future releases. Others might have ideas for a better approach.

qtnext

thanks for your help. It works now for select an item (and return the previous item to default state), but it don't works for the mousearea :

it seems that set currentIndex to -1 do nothing
if i do
@
MouseArea{
z:10;
anchors.fill:parent;
onClicked :grid_view.currentIndex=4;
}
@
with z==10 for exemple, it catch all mouse events, If I do z=-1 (behind the gridview) gridview catch all mouse events... so it don't work

[edit: added @ tag / $chetankjain]

? Offline

hi qtnext, better to format code snips using the @ tag, easier to read

anselmolsm

@qtnext

I wrote "an example":http://developer.qt.nokia.com/wiki/QML_gridview_mousearea_example based on what you described and on mbrasser's suggestion (comments and fixes are welcome =)

You need to set the z order of the 'external' mouse area to put it behind the grid view. In the example the mouse area is declared before the GridView, so I did not set z.

I think you are in the right way, just a small detail to make it work as expected =)

qtnext

I have tried what you have done in your sample (that exactly what I am trying to do) but it don't works (with or without z order) . It seems that grid view catch all mouse event

mbrasser

Hmm, you are right, it is more complicated if you want clicking the empty space within the grid to deselect. I've edited anselmolsm's example to show one way to support this, along with a note on why the fix works. Note that the fix uses an undocumented property (flickableChildren) in order to have the MouseArea become a child of the contentItem.