How to select/highlight more than one item in QML GridView?

dmcr

Hi,
try to put only one state of the same name (even if the code is the same)

AmanVirdi

Hi,
I tried it but nothing happened visually.
I tried it with on onClicked event.

AmanVirdi

Hi,
It works if I use "when" condition in state as below:

@ states:[
State {
name: "mouse-over"; when: markerArea.containsMouse
PropertyChanges { target: myImageSelected; opacity: 0.7}
},
State{
name: "mouse-click"; when: markerArea.pressed
PropertyChanges { target: myImageSelected; opacity: 1}
}
]@

but it is not stable.

It shows hovering visually but when I press and hold down the mouse button on an item and get mouse cursor out of that item(means dragging without scrolling the grid) and "mouse-click" state visually displays after the "mouse-over" state deactives. The "mouse-click" state is not visible if the item is clicked and cursor is on that item.

Any idea?

dmcr

Well this is quite a classical issue, you may catch the coordinates of the mouse and check whether or not it is inside the MouseArea.
Also you have a onRelease event which is usually better to use than onClicked event.

dmcr

Once i have done this :
@Rectangle{
id : idTX
anchor.fill:.....
MouseArea{
onMousePositionChanged:
{
if( mouse != null)
{
var okX = mouse.x > 0 && mouse.x < idTX.width
var okY = mouse.y > 0 && mouse.y < idTX.height

            if( !(okX && okY ) )
                {/*change your state here you are outside*/}
        }
    }
}

}@

Edit :
onExit do the job !

AmanVirdi

It didn't work for me..

dmcr

Did you try to get some debugging output in the onMousePositionChanged?
your error message is too short :)

AmanVirdi

I put your code into my code like this:

@ onPositionChanged: {
if( mouse != null)
{
var okX = mouse.x > 0 && mouse.x < parentItem.width
var okY = mouse.y > 0 && mouse.y < parentItem.height

                    if( !(okX && okY ) )
                    {
                        /*change your state here you are outside*/
                        console.log("okY = " + okY + " --- okX = " + okY);
                    }
                }
            }@

and the output on console is :
@
okY = false --- okX = false
okY = true --- okX = true
okY = true --- okX = true
@
What should I do now

dmcr

well, i have put it in the code :
when your mouse is outside the rectangle of your mouseArea, ie you pass in the
if( !(okX && okY ) ), then you can change your state as you like

AmanVirdi

Thanks for your ideas it really helped me.
But I was using models and now I am selecting the items using data models.

Thanks.