CODEWITHSUNDEEP
qtqml
rsht
rsht

Reputation: 1582

How to not clip child of the ListView delegate with other delegates

enter image description here

This is QML's ListView with cyan rectangle being single delegate. I want to enlarge those circles when hovered. The problem is that it's being clipped by delegates below - and that's perfectly expected, but how can I overcome this behaviour?

Here's the code for the example:

import QtQuick 2.7
import QtQuick.Controls 1.4

ApplicationWindow {
    id: rootWindow

    visible: true
    width: 640
    height: 480
    color: "white"

    ListView {
        anchors.fill: parent
        model: 15
        spacing: 5
        delegate: Rectangle {
            width: parent.width
            height: 30
            color: "cyan"
            border.width: 1
            border.color: "black"
            clip: false

            Rectangle {
                property real k: mouseArea.containsMouse ? 5 : 1
                anchors.centerIn: parent
                height: parent.height * 0.5 * k
                width: height
                radius: width / 2
                color: "yellow"
                border.width: 1
                border.color: "black"

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                }

                Behavior on k { PropertyAnimation { } }
            }

            // layer.enabled: true // why this clips childs ???
        }
    }
}

Additional question: why layer.enabled for the delegate start to clip it's child? Any ways to remove clipping with this property set to true?

Upvotes: 1

Views: 1360

Answers (1)

derM
derM

Reputation: 13711

You just raise the z-value when the delegate is hovered so that the hovered delegate will be rendered above the rest.

import QtQuick 2.7
import QtQuick.Controls 1.4

ApplicationWindow {
    id: rootWindow

    visible: true
    width: 640
    height: 480
    color: "white"

    ListView {
        anchors.fill: parent
        model: 15
        spacing: 5
        delegate: Rectangle {
            width: parent.width
            height: 30
            color: "cyan"
            border.width: 1
            border.color: "black"
            clip: false

 //*********v see this line!               
            z: mouseArea.containsMouse ? 2 : 1

            Rectangle {
                property real k: mouseArea.containsMouse ? 5 : 1
                anchors.centerIn: parent
                height: parent.height * 0.5 * k
                width: height
                radius: width / 2
                color: "yellow"
                border.width: 1
                border.color: "black"

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                }

                Behavior on k { PropertyAnimation { } }
            }
        }
    }
}

Upvotes: 3

Related Questions