Putting an element between a child and parent (z values) QML

Question

I was working with a GridView in QML. When I click on an element, I want to following highlight to happen:

However, my problem is that I want the blue color to appear below the delegate (not in the white area but still visible on the transparent side part) while the checkmark appears above (so it is visible). I have tried playing around with the z values so that the lowest z should be the blue rectangle, the middle should be the white rectangle part of the delegate, and the highest should be the check mark but i can't seem to make it work. Either the highlight or the delegate has to be on top. Does anyone know any way I can fix this so that it works correctly?

Code for highlight:

highlight:
        Rectangle {
        z:5
        color: "steelblue"; radius: 5; opacity: 0.5
        Image{
            z:8
            id: checkMark
            visible: found;
            x: parent.width-8-width
            y: 8
            width: 40;
            height: 40;
            source: "file:///Users/arjun/Documents/CompetitiveBall/images/checkMark.png"
        }
    }

Code for delegate:

 Component {
        id: contactsDelegate
        Rectangle{
            width: grid.cellWidth
            height: grid.cellHeight
            color: "transparent"

            Rectangle {
                z:7
                width: grid.cellWidth-20
                height: grid.cellHeight-20
                id: wrapper
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                border.width: 3
                border.color: "black"
                radius: 5;

                Image{
                    id: mImage
                    x:parent.x
                    width: 65
                    height:65;
                    source: picSource

                }
                Text{
                    width: grid.cellWidth-15
                    y: mImage.y+mImage.height+4
                    anchors.horizontalCenter: parent.horizontalCenter
                    id: nameText
                    text: name
                    font.family: "Palatino Linotype"
                    font.bold:  (grid.isCurrentItem===true)?"true":"false"
                    horizontalAlignment: Text.AlignHCenter
                    color:"#050027"
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        console.log("Clicked on :" + name)
                        //what happens when u click
                        grid.currentIndex=index;
                    }
                }
            }
        }
    }

 

Answer 1

Since you want part of the highlight to be underneath the delegate and part of it to be on top, you need to break it up into different pieces. I tested the code below with Qt 5.15.0. I made the normal highlight object draw underneath the delegate. Then I added another Rectangle that follows the highlight that draws on top of the delegate.

    GridView
    {
        id: lv
        anchors.fill: parent
        anchors.margins: 50
        cellWidth: 50
        cellHeight: 50

        model: 30
        
        // By default, highlight draws behind delegates
        // (You can specify a positive z-value to make it draw on top)
        highlight: Item
        {
            Rectangle
            {
                anchors.centerIn: parent
                width: 50
                height: 50
                color: "green"
            }
        }
        delegate: Rectangle
        {
            width: 30
            height: 30
            color: "red"

            MouseArea
            {
                anchors.fill: parent
                onClicked: lv.currentIndex = index;
            }
        }

        // This will draw on top of the delegates
        // (You can change that by specifying a negative z-value.)
        Rectangle
        {
            id: checkbox
            x: lv.highlightItem.x - lv.contentX
            y: lv.highlightItem.y - lv.contentY
            width: 10
            height: 10
            color: "blue"
        }
    }