我实现了一个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
}
}
答案 0 :(得分：2)
我编辑了你的例子。由于我没有图像，我将所有内容都改为带有颜色的矩形，以使其运行。
如果我能从头开始运行你的例子，那将是很好的。
您正在寻找的主要变化是在州。 通过设置＆＃34; ChangeProperty＆＃34;对于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
}
}
}
我认为应该按预期行事？
如果您正在寻找答案，请不要忘记接受我的答案。