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: myDelegate

        Rectangle {
            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.height

                if( !(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.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



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.