如何在QML中将列表项从网格视图带到最前面？

Question

我正在创建一个媒体播放器系统，其中我列出了一些使用网格视图的歌曲。在我们的应用程序中，我们可以从列表中拖动一首歌曲，并将其放到指定区域。所有这些功能都已经实现。但问题是，当我拖动时，该项目被拖动到网格视图中其他项目的后面。(即，如果我列出了3首歌曲，第一首歌在其他2首歌的后面。第二首歌在第三首歌之后，但在第一首歌之前)。

我尝试在网格项目将要拖放时将其放在最前面。对此有什么解决方案吗？

Answer 1

与拖动原始对象不同，您可以创建一个专用的拖动图标项，并将其设置为网格视图顶部的不可见项的父对象，这样它将位于网格中的每个元素的顶部。在拖动开始时创建项目，并在拖动结束时销毁它。

Answer 2

正如@derM所提到的，您可以使用GridItem的z索引。下面是一个示例代码，它可以帮助您完成相同的任务：

注意:与您的问题相关的部分是GridItem中MouseArea的onPressed事件中的代码。

Rectangle{
    width: 1280
    height: 800

    GridView{
        Rectangle{ anchors.fill: parent; color: 'blue'; opacity: 0.2; }
        id: musicBox
        width: 500; height: 500
        model: 10
        anchors.centerIn: parent

        delegate: Rectangle{
            id: songItem
            border{ width: 2; color: 'blue'}
            width: 100; height: 100
            color: (musicBox.currentIndex == index) ? 'yellow' : 'red'

            Text{
                anchors.centerIn: parent
                text: index
                font.pixelSize: 20
            }

            MouseArea{
                anchors.fill: songItem
                drag{
                    minimumX: 0
                    minimumY: 0
                    maximumX: musicBox.width
                    maximumY: musicBox.height
                    axis: Drag.XandYAxis
                    target: songItem
                }
                onPressed:{
                    for(var i = 0; i < musicBox.count; i++){ musicBox.currentIndex = i; musicBox.currentItem.z = i; }
                    musicBox.currentIndex = index
                    musicBox.currentItem.z = musicBox.count
                }
            }
        }
    }
}