How to select/highlight more than one item in QML GridView?
-
I am displaying some data in the GridView. I need to select more than one item in the gridview by mouse click and at the same time mouse-over effect is there. Grid has two image elements. One image is actual image(i.e. myImage) which is always visible and the second image(i.e. myImageSelected) is used to show selection and hovering by setting opacity of the image(myImageSelected).
Here is my code:
@Rectangle {
property variant items
Component {
id: myDelegateRectangle { id: parentItem width: grid.cellWidth height: grid.cellHeight color: "#00000000" Image { id: myImage height: 100 width: 100 source: coverart //coverart is child of "items" model smooth: true z: 9 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parentItem.top anchors.topMargin: 8 } BorderImage { id: myImageSelected height: myImage.height + 20 width: myImage.width + 20 smooth: true anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenterOffset: 2 anchors.top: parentItem.top z: 0 opacity: 0 source: "qrc:/resources/images/myImage-selected.png" } MouseArea { id: markerArea; anchors.fill: parentItem; hoverEnabled: true onEntered: { if(myImageSelected.state != "mouse-click") { myImageSelected.state = "mouse-over"; } console.log("onEntered = " + myImageSelected.state); } onClicked: { myImageSelected.state = "mouse-click"; console.log("onClicked = " + myImageSelected.state); } onExited: { if(myImageSelected.state != "mouse-click") { myImageSelected.state = ""; } console.log("onExited = " + myImageSelected.state); } } states: [ State { name: "mouse-over"; //when: markerArea.containsMouse PropertyChanges { target: myImageSelected; opacity: 0.7} }, State { name: "mouse-over"; PropertyChanges { target: myImageSelected; opacity: 0.7} } ] transitions: Transition { NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad; duration: 300 } } } } GridView { id: grid clip: true anchors.fill: parent cellWidth: 130 cellHeight: 160 model: items focus: true delegate: myDelegate }
}@
Now, the problem is, the states are applied on the mouse events but not visible.
Do you have any idea about this problem? Please tell if I am on right track or this can be done in other way.Thanks.........
-
Hi,
try to put only one state of the same name (even if the code is the same) -
Hi,
I tried it but nothing happened visually.
I tried it with on onClicked event. -
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?
-
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. -
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.heightif( !(okX && okY ) ) {/*change your state here you are outside*/} } } }
}@
Edit :
onExit do the job ! -
It didn't work for me..
-
Did you try to get some debugging output in the onMousePositionChanged?
your error message is too short :) -
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.heightif( !(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 -
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 -
Thanks for your ideas it really helped me.
But I was using models and now I am selecting the items using data models.Thanks.