QML拖动一个组件,好像它具有顶部堆叠顺序(最大z)

Question

QT5.5,QML:

我正在使用示例" Qt快速示例 - 拖放 "在此示例中,您可以看到,如果我们拖动红色磁贴"1",当我们拖动它时它会出现在其他磁贴下.

我不喜欢这种效果,因为当我们拖动一个项目时,我希望它总是出现在整个GUI的顶部.

我尝试的是:一旦按下鼠标,我们将项目的z设置为最大值.当释放鼠标时,将z设置为较小的值(或者更好,我们可以保存原始值并将其重置回原始值)

MouseArea {
        id: mouseArea

        width: 64; height: 64
        anchors.centerIn: parent

        drag.target: tile

        onPressed: {
             tile.z = 100;
        }
        onReleased: {
             tile.z = 0;
             parent = tile.Drag.target !== null ? tile.Drag.target : root
        }
}

但代码不起作用.实际上通过使用console.log,我可以看到z值发生了变化,但拖动的鬼影仍然出现在底部.所以我想当实现onPressed时,拖动机制已使用其原始z值,并且没有机会访问更新的z值.

所以任何想法都有更好的阻力运动？

谢谢!

Answer 1

z项目的价值仅适用于兄弟姐妹和直接(直接)父母:

具有较高堆叠值的项目绘制在具有较低堆叠顺序的兄弟姐妹之上.具有相同堆叠值的项目按其出现的顺序自下而上绘制.具有负堆叠值的项目将在其父级内容下绘制.

让我们用一个小例子来测试父/子场景:

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")
    flags: Qt.FramelessWindowHint

    Rectangle {
        color: "salmon"
        width: 64
        height: 64
        anchors.centerIn: parent

        Text {
            text: "1"
        }

        Rectangle {
            color: "steelblue"
            x: 32
            y: 32
            width: 64
            height: 64

            Text {
                text: "2"
            }

            Rectangle {
                color: "orchid"
                x: 16
                y: -16
                width: 64
                height: 64
                z: -2

                Text {
                    text: "3"
                }
            }
        }
    }
}

我们将z第三个的值设置Rectangle为-2,希望它会落后于第一个,但是因为它是第二个的孩子,而不是第一个孩子,所以它是遥不可及的.这就是拖放示例中发生的事情:物品在祖先方面相距太远.

为了进一步详细说明,让我们DragTile.qml从Drag and Drop示例中获取并以与您相似的方式对其进行修改(顺便说一下,这是实现相同功能的更好方法):

states: State {
    when: mouseArea.drag.active
    ParentChange { target: tile; parent: root }
    AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
    PropertyChanges {
        target: tile
        z: 100
    }
}

这也行不通.为了看看发生了什么,我们可以使用一个很棒的小环境变量来调用QSG_VISUALIZE.具体来说,我们想要使用overdraw可视化,它为我们提供了一个包含我们场景的漂亮旋转3D框.即使使用PropertyChanges上面的内容,您也可以看到项目的堆叠顺序不变:

要确保项目呈现在所有内容之上,您需要将其父项提供给实际位于所有项目之上的项目.我们可以通过Item在末尾添加一个来完成此操作tiles.qml:

Item {
    id: dragContainer
    anchors.fill: parent
}

向DragTile组件添加属性,使组委员能够访问容器:

property Item dragParent

然后,在tiles.qml以下位置分配容器:

delegate: DragTile { colorKey: "red"; dragParent: dragContainer }

接下来,修改in 的parent属性:ParentChangeDragTile.qml

ParentChange { target: tile; parent: dragParent }

最终结果:

请注意,我故意排除了"后退"按钮,但是如果你想因为某些原因让它超过它,那么你可以dragContainer在层次结构中向上移动.