如何不与其他委托一起剪辑ListView委托的子节点

Question

这是QML的ListView，青色矩形是单个委托。我想在盘旋时扩大这些圈子。问题是它被下面的代表剪掉了 - 这是完全可以预料到的，但我怎样才能克服这种行为？

以下是该示例的代码：

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 ???
        }
    }
}

其他问题：为什么委托的layer.enabled开始剪辑它的孩子？使用此属性设置为true的任何方法来删除剪辑？

Answer 1

您只需在委托悬停时提高z - 值，以便将悬停的委托呈现在其余委托之上。

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 { } }
            }
        }
    }
}