视图项在qml中的删除区域外被删除

时间:2016-10-17 11:43:04

标签: qt gridview qml

我实现了一个Gridview,它有不同的图像我需要将项目拖出网格视图并将其放在DropArea中。我跟着How to drag an item outside a ListView in QML但是现在我的网格项可以在整个页面的任何地方拖动。我需要将它限制在DropArea中。 它还在网格项中存在分层问题。我试图将拖动的图块带到最顶层的视图 我对Qt完全不满意

这是我的代码

import QtQuick 2.0

Item {

    id: media_item
    anchors.fill: parent



    Rectangle
    {
        y: 100
        id: holder_box
        width: 450
        height: 150
        color: "#99000000"
        radius: 5

        GridView {
            id: grid
            anchors.fill: parent
            model: mediaModel
            delegate:  Item {
                id: main_item
                width: grid.cellWidth;
                height: grid.cellHeight


                Rectangle {
                    id: item; parent: grid
                    color: mediagraphic
                    x: main_item.x; y: main_item.y
                    width: 100; height: 100;

                    Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                }
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: main_item.width / 2
                Drag.hotSpot.y: main_item.height / 2


                MouseArea {
                    id: mouseArea
                    anchors.fill: main_item
                    drag.target: main_item

                    drag.onActiveChanged: {
                        if (mouseArea.drag.active) {
                            grid.dragItemIndex = index;
                        }
                        main_item.Drag.drop();
                    }
                }

                states: [

                    State {
                        name: 'dragged'
                        when: main_item.Drag.active
                        PropertyChanges {
                            target: main_item
                            x: x
                            y: y
                        }
                        ParentChange
                        {
                            target: main_item
                            parent: topDrag
                        }
                    }
                ]

                onStateChanged: console.log('State', state)
            }
            interactive: false
            anchors.topMargin: -30

            property int dragItemIndex: -1

        }




        ListModel {
            id: mediaModel
            ListElement { mediagraphic: "orchid"
                songname: "Song 1"}
            ListElement {mediagraphic: "pink"
                songname: "Song 2"}
            ListElement {mediagraphic: "purple"
                songname: "Song 3"}
            ListElement {mediagraphic: "lighpink"
                songname: "Song 4"}
            ListElement {mediagraphic: "blue"
                songname: "Song 5"}
            ListElement {mediagraphic: "grey"
                songname: "Song 6"}
        }


        Component
        {
            id: grid_component

            Item {
                id: main_item
                width: grid.cellWidth;
                height: grid.cellHeight


                Rectangle {
                    id: item; parent: grid
                    color: mediagraphic
                    x: main_item.x; y: main_item.y
                    width: 100; height: 100;

                    Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                }
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: main_item.width / 2
                Drag.hotSpot.y: main_item.height / 2


                MouseArea {
                    id: mouseArea
                    anchors.fill: main_item
                    drag.target: main_item

                    drag.onActiveChanged: {
                        if (mouseArea.drag.active) {
                            grid.dragItemIndex = index;
                        }
                        main_item.Drag.drop();
                    }
                }

                states: [

                    State {
                        name: 'dragged'
                        when: main_item.Drag.active
                        PropertyChanges {
                            target: main_item
                            x: x
                            y: y
                        }
                        ParentChange
                        {
                            target: main_item
                            parent: media_item
                        }
                    }
                ]

                onStateChanged: console.log('State', state)
            }
        }

    }

    Rectangle
    {
        id: now_playing_rect
        height: parent.height
        width: parent.width/2
        x: 640
        color: "Transparent"


        DropArea
        {
            id: dropArea
            width: 200
            height: 200
            anchors.centerIn: parent
            onDropped:
            {
                song_details.text = grid.model.get(grid.dragItemIndex).songname
                selected_song_image.color =  grid.model.get(grid.dragItemIndex).mediagraphic
                mediaModel.remove(grid.dragItemIndex)
            }
        }

        Rectangle {
            id: selected_song_image
            width: 200
            height: 200
            anchors.centerIn: parent
        }

        Rectangle {
            id: next
            color: 'green'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.left: dropArea.right
            width: 50
            height: 50
        }

        Rectangle {
            id: previous
            color: 'brown'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.right: dropArea.left
            width: 50
            height: 50
        }

        Text {
            id: song_details
            text: qsTr("Song Title")
            anchors.top: dropArea.bottom
            font.pointSize: 30
            color: "White"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Item {
        id: topDrag
        anchors.fill: parent
    }
}

1 个答案:

答案 0 :(得分:2)

我编辑了你的例子。由于我没有图像,我将所有内容都改为带有颜色的矩形,以使其运行。

如果我能从头开始运行你的例子,那将是很好的。

您正在寻找的主要变化是在州。 通过设置" ChangeProperty"对于x和y,当状态改变时它们将被重置。

Item {

    id: media_item
    anchors.fill: parent



    Rectangle
    {
        y: 100
        id: holder_box
        width: 450
        height: 150
        color: "#99000000"
        radius: 5

        GridView {
            id: grid
            anchors.fill: parent
            model: mediaModel
            delegate: grid_component
            interactive: false
            anchors.topMargin: -30

            property int dragItemIndex: -1

        }




        ListModel {
            id: mediaModel
            ListElement { mediagraphic: "orchid"
                songname: "Song 1"}
            ListElement {mediagraphic: "pink"
                songname: "Song 2"}
            ListElement {mediagraphic: "purple"
                songname: "Song 3"}
            ListElement {mediagraphic: "lighpink"
                songname: "Song 4"}
            ListElement {mediagraphic: "blue"
                songname: "Song 5"}
            ListElement {mediagraphic: "grey"
                songname: "Song 6"}
        }


        Component
        {
            id: grid_component

            Item {
                id: main_item
                width: grid.cellWidth;
                height: grid.cellHeight


                Rectangle {
                    id: item; parent: grid
                    color: mediagraphic
                    x: main_item.x; y: main_item.y
                    width: 100; height: 100;

                    Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                }
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: main_item.width / 2
                Drag.hotSpot.y: main_item.height / 2


                MouseArea {
                    id: mouseArea
                    anchors.fill: main_item
                    drag.target: main_item

                    drag.onActiveChanged: {
                        if (mouseArea.drag.active) {
                            grid.dragItemIndex = index;
                        }
                        main_item.Drag.drop();
                    }
                }

                states: [

                    State {
                        name: 'dragged'
                        when: main_item.Drag.active
                        PropertyChanges {
                            target: main_item
                            x: x
                            y: y
                        }
                    }
                ]

                onStateChanged: console.log('State', state)
            }
        }

    }

    Rectangle
    {
        id: now_playing_rect
        height: parent.height
        width: parent.width/2
        x: 640
        color: "Transparent"


        DropArea
        {
            id: dropArea
            width: 200
            height: 200
            anchors.centerIn: parent
            onDropped:
            {
                song_details.text = grid.model.get(grid.dragItemIndex).songname
                selected_song_image.color =  grid.model.get(grid.dragItemIndex).mediagraphic
                mediaModel.remove(grid.dragItemIndex)
            }
        }

        Rectangle {
            id: selected_song_image
            width: 200
            height: 200
            anchors.centerIn: parent
        }

        Rectangle {
            id: next
            color: 'green'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.left: dropArea.right
            width: 50
            height: 50
        }

        Rectangle {
            id: previous
            color: 'brown'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.right: dropArea.left
            width: 50
            height: 50
        }

        Text {
            id: song_details
            text: qsTr("Song Title")
            anchors.top: dropArea.bottom
            font.pointSize: 30
            color: "White"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

我认为应该按预期行事?

如果您正在寻找答案,请不要忘记接受我的答案。