我实现了一个 Gridview，它有不同的图像，我需要将项目拖出网格视图并将其放置在 DropArea 中。我跟着如何在 QML 中将项目拖动到 ListView 之外但现在我的网格项可以拖动到整个页面的任何位置。我需要将其限制为 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
}
}
我编辑了你的示例。由于我没有图像，我将所有内容更改为带有颜色的矩形，以使其运行。
为了将来的说明，如果我能从头开始运行你的示例，那就太好了。
您正在寻找的主要变化是在各州。
通过为 x 和 y 设置“ChangeProperty”，当状态变回时它们将被重置。
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
}
}
}
我认为它应该像预期的那样表现？
如果这是您正在寻找的内容，请不要忘记接受我的答案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
