查看项目在 qml 中被丢弃在放置区域之外 [英] View Item gets dropped outside drop area in qml
本文介绍了查看项目在 qml 中被丢弃在放置区域之外的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我实现了一个 Gridview，其中包含不同的图像，我需要将项目拖出网格视图并将其放置在 DropArea 中.我关注了 How-to-drag-an-item-outside-a-listview-in-qml">How to drag an item outside a ListView in QML 但是现在我的网格项可以在页面中的任何地方拖动.我需要将其限制为 DropArea.它还存在网格项目的分层问题.我正在尝试将拖动的图块带到最顶层的视图我对 Qt 完全陌生
I implemented an Gridview and it has different images in them i need to drag items out of the grid view and place it in a DropArea. I followed How to drag an item outside a ListView in QML But now my grid item can be dragged throughout the page anywhere.I need to restrict this to the DropArea. It also has the layering issue in grid items. I am trying to bring the dragged tile to the topmost view I am completely fresh to 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
}
}
推荐答案
我编辑了你的示例.由于我没有图像，我将所有内容都更改为带颜色的矩形，以使其运行.
I edited your Example. As I had no Images, I changed everything to Rectangles with colors, to make it running.
为了以后的注意，如果我能从头开始运行你的示例，那就太好了.
For future note, it would be nice, if I could run your example from the beginning.
您正在寻找的主要变化是在各州.通过为 x 和 y 设置ChangeProperty"，它们将在状态变回时被重置.
The main change, you are looking for is in the states. By setting a "ChangeProperty" for x and y, they will be resetted when the state changes back.
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
}
}
}
我认为它应该按预期运行?
I think it should behave as expected?
请不要忘记接受我的回答，如果它是您想要的.
Please do not forget to accept my answer, if it is what you were looking for.
这篇关于查看项目在 qml 中被丢弃在放置区域之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
