可拖动项目隐藏在其他 UI 元素后面 - Qt Qml

Question

在我的应用程序窗口中，我有两个 ItemPanels，它们在 RawLayout 内组织。

Item {
    RowLayout {
        anchors.fill: parent
        spacing: 1

        ItemPanel {
            Layout.preferredWidth: 250
            Layout.fillHeight: true

            panelHeader: "Components"

            DraggableItem {
                width: 100; height: 100;
            }
        }


        ItemPanel {
            Layout.preferredWidth: 250
            Layout.fillHeight: true

            panelHeader: "Actions"
        } 
    }
}

Components 面板包含DraggableItems。可拖放区域是Actions 面板。但如果我试图将DraggableItem 拖到Actions 面板，在我拖动它时它会被隐藏。

可拖动项目

Item {
    id: root
    property string colorKey: "red"

    width: 64; height: 64

    MouseArea {
        id: mouseArea

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

        drag.target: tile

        onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root

        Rectangle {
            id: tile

            width: 64; height: 64
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            color: colorKey

            Drag.keys: [ colorKey ]
            Drag.active: mouseArea.drag.active
            Drag.hotSpot.x: 32
            Drag.hotSpot.y: 32
            states: State {
                when: mouseArea.drag.active
                ParentChange { target: tile; parent: root }
                AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
            }
        }
    }
}

我正在考虑添加一个透明图层并在拖动时将父图层更改为它，但我不知道如何在所有内容之上添加一个新图层。还有其他解决方法吗？

Answer 1

最简单的方法是将带有panelHeader: "Components" 的ItemPanel 的z 值更改为大于兄弟姐妹的值。然后自动地，所有的孩子也将在他们之上分层。

重生也是一个很好的解决方案。如果您在项目中使用 ApplicationWindow 作为根对象，您甚至不需要创建添加新层 - 它已经存在。

您可以使用 附加属性 ApplicationWindow 将您的可拖动对象重新设置为 ApplicationWindow.overlay。剩下的唯一挑战是，您需要指定正确的位置。您可以为此使用mapToItem() 和mapFromItem()。

如果您没有ApplicationWindow 作为根，您可以添加一个常规Item 作为您的根的子级，并将z-值设置为它的兄弟姐妹中的最大值。然后你给它一个id。如果您不隐藏此id（其他标识符具有相同名称，以更高的优先级解析），您可以从任何地方寻址此Item。请参阅此here 的更多信息。